HTML部分:

  <div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  </div>

CSS部分:

    .wrapper {
      display: grid;
    /*display 属性规定元素应该生成的框的类型*/

      grid-template-columns: repeat(3, 1fr);
    /*设置网格为3列;
    fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,
    如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配;
    repeat为重复片段,允许重复大量 列 的片段*/

      grid-gap: 10px;
    /*设置网格间隙为10像素*/

      grid-auto-rows: minmax(100px, auto);
    /*定义了最小值为100像素,最大值设为自动*/
      }

    .one {
      grid-column: 1 / 3;
    /*占用列的位置,从第一到第三列*/

      grid-row: 1;
    /*占用行的位置*/

      opacity:0.6;
    /*设置透明度方便观察*/

      background: #408353;
    /*设置背景色便于观察*/
      }

    .two {
      grid-column: 2 / 4;
      grid-row: 1 / 3;
    /*占用行的位置,从第一到第三行*/

      opacity:0.6;
      background: #543634;
      }

    .three {
      grid-column: 1;
      grid-row: 2 / 5;
      opacity:0.6;
      background: #634653;
      }

   .four {
      grid-column: 3;
      grid-row: 3;
      opacity:0.6;
      background: #744143;
      }

   .five {
      grid-column: 2;
      grid-row: 4;
      opacity:0.6;
      background: #624642;
      }

   .six {
      grid-column: 3;
      grid-row: 4;
      opacity:0.6;
      background: #532535;
      }

以上grid的代码部分,运行效果如图:

其网格宽度随着网页宽度而变化,占据满整个网页宽度

------------------2018.12.29补充-----------------

在grid中可以使用grid-area / grid-column+grid-row 来对div盒子进行定位

----关于grid----的更多相关文章

  1. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  2. WPF中Grid实现网格,表格样式通用类

    /// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...

  3. 在 Windows Phone 中,为 Grid 添加 Tilt 效果

    在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要 ...

  4. wpf 列表、菜单 收起与展开,通过Grid DoubleAnimation或者Expander实现

    菜单收缩有很多种方法具体如何实现还是看个人想法: 第一种通过后台控制收起与展开: 效果图: 代码 : <Grid> <Grid.ColumnDefinitions> <C ...

  5. Sencha ExtJS 6 Widget Grid 入门

    最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...

  6. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  7. [转]ExtJS Grid 分页时保持选中的简单实现方法

    原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...

  8. [转]extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决方法

    原文地址:http://379548695.iteye.com/blog/1167234 grid的复选框定义如下:   var sm = new Ext.grid.CheckboxSelection ...

  9. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  10. selenium 测试框架中使用grid

    之前的测试框架:http://www.cnblogs.com/tobecrazy/p/4553444.html 配合Jenkins可持续集成:http://www.cnblogs.com/tobecr ...

随机推荐

  1. 将Long类型转为字母数字组合的jar包---Hashids

    在设计数据库时,我有时喜欢使用自增Id,而不是uuid,但是在面对终端用户时,直接暴露id不是一个好的行为. 经过查询,可以使用 Hashids 这个jar包将id转为类似YouTube的大小写字母和 ...

  2. FastCGI点滴

    FastCGI是一种二进制协议,用于将交互式程序与Web服务器连接.它是早期通用网关接口(CGI)的变体.FastCGI的主要目标是减少与Web服务器和CGI程序之间的接口相关的开销,允许服务器每单位 ...

  3. MySQL导出数据字典

    平时用mysql比较多,有时候需要详细的数据库设计表结构和数据字典,但又没有最新的文档,这个时候直接从数据导出是最新最全的.在MySQL数据库中利用information_schema库中的COLUM ...

  4. JAVA 没有重载运算符,那么 String 类型的加法是怎么实现的,以及String类型不可变的原因和好处

    1, JAVA 不具备 C++ 和 C# 一样的重载运算符 来实现类与类之间相互计算 的功能    这其实一定程度上让编程失去了代码的灵活性, 但是个人认为,这在一定程度上减少了代码异常的概率     ...

  5. JRebel 代理激活

    1.生成GUID   https://www.guidgen.com/ 例:04cfff79-8f45-481c-a858-a5b9590422e7 2.License Server 例: http: ...

  6. byobu 禁止窗口名称随目录变化

    It looks like the config set-window-option -g automatic-rename off doesn't work. When I added the fo ...

  7. 尚硅谷springboot学习25-嵌入式Servlet容器

    SpringBoot默认使用Tomcat作为嵌入式的Servlet容器:

  8. 深度学习VS机器学习——到底什么区别

    转自:https://baijiahao.baidu.com/s?id=1595509949786067084&wfr=spider&for=pc 最近在听深度学习的课,老师提了一个基 ...

  9. [C语言]进阶|链表

    --------------------------------------------------------------------------------------- 可变数组: array. ...

  10. 使用jQuery+huandlebars遍历中if判断

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...