CSS3中的display：grid⽹格布局介绍
1.⽹格布局(grid):
        它将⽹页划分成⼀个个⽹格，可以任意组合不同的⽹格，做出各种各样的布局;
2.基本概念：
        容器和项⽬，如图所⽰：
<div class="content">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
<div class="b">7</div>
<div class="b">8</div>
<div class="b">9</div>
</div>
        .content即为容器，.b即为项⽬。
        ⾏和列：
        ⾏：row；
css实现三列布局        列：column；
3.容器属性
        display:grid;            //默认是块元素；
        display:inline-grid;        　//⾏内块元素
        指定⼀个容器采⽤⽹格布局；
        注意：设置为grid后，⼦元素的float,display: inline-block,display: table-cell、vertical-align和column-*等设置都将失效。       
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
4.属性解释
        grid-template-columns：定义每⼀列的列宽；
        grid-template-columns：100px  100px  100px;      //总共三列，每列列宽是100px；=
        grid-template-rows：定义每⼀⾏的⾏⾼；
        grid-template-rows：100px  100px  100px;        //从上⾄下，每⾏⾼度为100px；
        //除了使⽤像素，还可以使⽤百分⽐；
        拓展：
            重复写值很⿇烦，可以⽤repeate函数；
            repeat(次数，⼤⼩)；
            例如：repeat(3,100px);            //重复3次，每次100px；
        repeat写法：
        grid-template-columns：repeat(3,100px);
        grid-template-rows：repeat(3,100px);
        也可以重复某⼀种不固定⼤⼩模式；
        例如：
        grid-template-columns：100px  80px  100px;       
        改写成：
        grid-template-columns：repeat(2,100px  80px);    //代表重复2次100px  80px的模式；也就是4列；        等同于：
        grid-template-columns：100px  80px  100px 80px;
        如图：　
5.关键字
        1,auto-fill；如果容器⼤⼩不固定，项⽬⼤⼩固定，可以⽤auto-fill关键字⾃动填充；
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
      2,fr(fraction)：如果两列的宽度分别为1fr和2fr，就表⽰后者是前者的两倍。
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, 100px 80px);
}
      fr也可以和px配合使⽤；
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 400px 1fr 2fr;
}
      3.minmax();
      grid-template-columns: 1fr 5fr minmax(100px, 1fr);
      解释：第⼀列是1fr，第⼆列是5fr，第三列最⼩值是100px，最⼤是1fr。当第⼆列fr⽆限⼤时和第三列到100px时，会往第⼀列借值；
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 1fr 5fr minmax(100px, 1fr);
}
      4.auto:⾃适应；
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px auto 100px;
}
6.⽹格线名称：
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
        解释：指定每⼀根⽹格线的名字，⽅便以后的引⽤。        也可以有多个名字；[c1,c1a]
7.间距
      row-gap:⾏间距；
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
row-gap: 20px;
}
      colum-gap：列间距；　
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
column-gap: 20px;
}
      简写：
      gap:20px 20px;
      row-gap和column-gap简写形式；
      gap省略了第⼆个值，浏览器认为第⼆个值等于第⼀个值。
8.区域
  grid-template-areas：⽹格布局允许指定"区域"（area），⼀个区域由单个或多个单元格组成。grid-template-areas属性⽤于定义区域。        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-areas: 'a b c' 'd e f' 'g h i';
}
9.放置顺序：
      grid-auto-flow：划分⽹格以后，容器的⼦元素会按照顺序，⾃动放置在每⼀个⽹格。默认的放置顺序是"先⾏后列"，即先填满第⼀⾏，再开始放⼊第⼆⾏；
      默认是row；
.content {
box-shadow: 001px#f6f;
display: grid;
grid-template-columns: 100px100px100px;
grid-template-rows: 100px100px100px;
grid-template-areas: 'a b c''d e f''g h i';
grid-auto-flow: column;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。