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；
        列：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;box shadow怎么设置
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;
}

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