美文网首页
GridLayout网格布局

GridLayout网格布局

作者: 九又四分之三o | 来源:发表于2017-03-01 15:53 被阅读0次

    网格术语

    网格线(Grid Lines)
    网格线组成了网格,他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。


    上图突出显示的红线就是第二列的网格线(line2)
    • 网格轨道(Grid Track)
      网格轨道是就是相邻两条网格线之间的空间,就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。


      图中突出显示的就是行线line2和line3之间组成的网格轨道
    • 网格单元格(Grid Cell)
      网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。
    图中突出显示的单元格是由行线line2、line3和列线line2、line3组成的
    • 网格区域(Grid Area)
      网格区域是由任意四条网格线组成的空间,所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。


      图中突出显示的网格区域是行线line1、line3和列线line2、line4之间的区域,其主要包括了四个网格单元格。
    • 网格容器(Grid Containers)
      通过使用display属性给元素显式设置了属性值grid或inline-grid,此时这个元素将自动变成网格容器。这个类似于flexbox一样,将元素设置设置为display:flex,元素将自动变成弹性盒模型。
    • 网格单元格顺序(order)
      网格单元格顺序和Flexbox模块一样,通过order属性来对网格单父元格进行顺序重排。

    定义一个网格

    .wrapper {
                display: grid;
                grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;//列宽 列间距 列宽 列间距 列宽 列间距 列宽
                grid-template-rows: auto 10px auto 10px auto;//行高 行间距 行高 行间距 行高
            }
    

    基于网格的占位区

    对于网格线,在网格布局中有两种,一种是列线,另一种是行线。对应的个网格单元格都有列线起始线(grid-column-start)、列线终止线(grid-column-end)和行线起始线(grid-row-start)、行线终止线(grid-row-end)。

    <div class="wrapper">
      <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
      <div class="box e">E</div>
    </div>
    
    body {
      padding: 50px;
      }
    .wrapper {
      display: grid;
      grid-template-columns: 100px 10px 100px ;
      grid-template-rows: auto 10px auto 10px auto;
    }
    .box {
      background-color: #444;
      color: #fff;
      font-size: 150%;
      padding: 20px;
      text-align: center;
    }
    .a{
      grid-column-start: 1;
      grid-column-end: 2; 
      grid-row-start: 1;
      grid-row-end: 2;
    }
    .b {
      grid-column-start: 3;
      grid-column-end: 4; 
      grid-row-start: 1;
      grid-row-end: 2; 
    }
    //以下为简写方式
    .c { 
      grid-column: 1/2;
      grid-row: 3/4;
    }
    //以下为网格区域写法grid-area:row-start/column-start/row-end/column-end
    .d { 
      grid-area: 3/3/4/4
    }
    
    .e { 
      grid-area:5/1/6/2
    }
    

    如下图所示:

    gridLayout1.jpg

    相关文章

      网友评论

          本文标题:GridLayout网格布局

          本文链接:https://www.haomeiwen.com/subject/yxyqgttx.html