css grid 格子布局

Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。
设置cssdisplay:grid或者display:inline-grid,都可以将直接将容器能产生单元格的容器

1. 容器属性
   grid-template-rows设置每一行的宽度，可以是具体值，也可以百分比，也可以是auto
grid-template-columns设置每一列的宽度，可以是具体值，也可以百分比，也可以是auto

   .box{
     width:500px;
     height:480px;
     border:1px solid #000;
     display:grid;
     grid-template-rows:10% auto 20%;
     grid-template-columns:100px auto 100px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   .div1{
     background:red;
   }
   .div2{
     background:green;
   }
   .div3{
     background:yellow;
   }
   .div4{
     background:blue;
   }
   .div5{
     background:palegreen;
   }
   .div6{
     background:plum;
   }
   .div7{
     background:peru;
   }
   .div8{
     background:yellowgreen;
   }
   .div9{
     background:powderblue;
   }
   .div10{
     background:palevioletred;
   }
   

   <div class="box">
     <div class="div1">1</div>
     <div class="div2">222222222222</div>
     <div class="div3">3</div>
     <div class="div4">4</div>
     <div class="div5">5</div>
     <div class="div6">6</div>
     <div class="div7">7</div>
     <div class="div8">8</div>
     <div class="div9">9</div>
     <div class="div10">10</div>
   </div>
   

   结果如图所示，虽然设置的是三行三列，但是如果html多出来的div10，会直接换行显示，并且高度塞满容器
   

   设置div为格子容器

   • repeat属性
     相当于重复的简写，第一个参数是次数，第二个是重复的值

       grid-template-rows:repeat(3,100px);
       grid-template-columns:repeat(3,150px);
     

   • auto-fill属性
     有时候单元格的数量是不固定的，大小是固定的，需要自动填充容器，就可以用auto-fill属性

     .box{
       width:500px;
       height:480px;
       border:1px solid #000;
       display:grid;
       grid-template-rows:repeat(3,100px);
       grid-template-columns:repeat(auto-fill,60px);
       margin:0 auto;
       margin-top:10px;
       color:white;
       font-size:30px;
     }
     

     auto-fill填充容器

   • fr属性
     fr属性可以平分比例，但是和百分比不一样，百分比不算gap空间，fr是算上的

     .box{
       width:500px;
       height:480px;
       border:1px solid #000;
       display:grid;
       grid-template-rows:1fr 1fr 1fr 1fr;
       grid-template-columns:repeat(4,1fr);
       margin:0 auto;
       margin-top:10px;
       color:white;
       font-size:30px;
     }
     

     如图所示，行平分了四行，列没有被平分，是因为第二列的内容超出了平分的比例，就会多出去，相应的另外三列就会同比例的减小

     
     fr平分片段弹性布局

   • minmax函数
     minmax函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值

     .box{
       width:500px;
       height:480px;
       border:1px solid #000;
       display:grid;
       grid-template-rows:1fr 1fr 1fr 1fr;
       grid-template-columns:150px 150px 150px minmax(10px,100px);
       margin:0 auto;
       margin-top:10px;
       color:white;
       font-size:30px;
     }
     

     如图所示，前三列都是150px,容器的宽度是500px，第四列是50px,在minmax(10px,100px)区间中
     

     minmax(10px,100px)

   • row-gap和column-gap
     格子之间的间距row-gap表示行与行之间的间距、column-gap表示列与列之间的间距

       .box{
          width:500px;
          height:480px;
          border:1px solid #000;
          display:grid;
          grid-template-rows:1fr 1fr 1fr 1fr;
          grid-template-columns:150px 150px 150px minmax(10px,100px);
          column-gap:10px;
          row-gap:30px;
          margin:0 auto;
          margin-top:10px;
          color:white;
          font-size:30px;
        }
     

     如图所示，如果row-gap和column-gap的值一样，例如都是10px,可以简写成gap:10px，如果不一样，可以简写成gap:30px 10px,30px代表row行间距，10px代表column列间距
     

     gap的间距

   • grid-auto-flow
     网格的排放顺序，默认是row,先行后列，可以设置column,就是先列后行

      .box{
         width:500px;
         height:480px;
         border:1px solid #000;
         display:grid;
         grid-template-rows:100px 100px 100px;
         grid-template-columns:120px 120px 120px;
         column-gap:10px;
         row-gap:30px;
         margin:0 auto;
         margin-top:10px;
         color:white;
         font-size:30px;
       }
     

     如图所示，设置按照column排序，就会先列后行排序
     

     按照column排序
     有时有些格子大的情况下，会让容器有些地方空出来，占不满容器，空间利用率不高

       .box{
         width:500px;
         height:480px;
         border:1px solid #000;
         display:grid;
         grid-template-rows:100px 100px 100px;
         grid-template-columns:150px 150px 150px;
         column-gap:10px;
         row-gap:30px;
         grid-auto-flow:row;
         margin:0 auto;
         margin-top:10px;
         color:white;
         font-size:30px;
       }
      .div1{
         grid-column-start:1;
         grid-column-end:3;
         background:red;
       }
      .div2{
         grid-column-start:1;
         grid-column-end:3;
         background:green;
       }
     

     如下图所示，使用grid-auto-flow:row,先行后列排序，由于第一和第二个格子大了，导致第一和第二个格子之间有空间
     

     先行后列排序
     如果想提高空间利用率的话，可以设置dense来提高空间利用率：grid-auto-flow:row dense;

        .box{
           width:500px;
           height:480px;
           border:1px solid #000;
           display:grid;
           grid-template-rows:100px 100px 100px;
           grid-template-columns:150px 150px 150px;
           column-gap:10px;
           row-gap:30px;
           grid-auto-flow:row dense;
           margin:0 auto;
           margin-top:10px;
           color:white;
           font-size:30px;
         }
     

     如下图所示：设置dense之后，将第一个格子和第二个格子之间的空间占满
     

     设置dense之后

   • justify-items和align-items
     设置单元格的水平和垂直方向对齐方式

     1. 水平方向上justify-items:start|end|center|stretch;

     2. 垂直方向上align-items:start|end|center|stretch;

        • start起始方向对齐
        • center居中对齐
        • end末尾方向对齐
        • stretch延伸，以填满整个单元格，默认值
          例如设置水平方向末尾对其justify-items:end;，垂直方向单元格填满拉伸align-items:stretch;

          .box{
            border:1px solid #000;
            display:grid;
            grid-template-rows:120px 120px 120px;
            grid-template-columns:120px 120px 120px;
            column-gap:10px;
            row-gap:30px;
            justify-items:end;
            align-items:stretch;
            margin:0 auto;
            margin-top:10px;
            color:white;
            font-size:30px;
          }
          

          水平末尾对其，垂直拉满单元格
          align-items:stretch;和justify-items:end;水平垂直对齐方式可以用简写的方式place-items:stretch end;，stretch代表垂直方向上的对齐方式，end代表水平方向的对齐方式
          place-items简写方式

   • justify-content和align-content
     设置容器的水平和垂直方向对齐方式

     1. 水平方向上justify-content:start|end|center|stretch|space-around|space-between|space-evenly;

     2. 垂直方向上align-content:start|end|center|stretch|space-around|space-between|space-evenly;

        • start从行首开始排列
        • center在容器中剧中排列。
        • end从行末开始排列
        • stretch延伸，以填满整个容器，默认值
        • space-around在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
        • space-between在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
        • space-evenly项目与项目之间的距离和项目与起始位置的距离都相同。
          例如设置水平方向平分靠两边对齐justify-content:space-between;，垂直方向居中align-items:center;

          .box{
            border:1px solid #000;
            display:grid;
            grid-template-rows:120px 120px 120px;
            grid-template-columns:120px 120px 120px;
            column-gap:10px;
            row-gap:30px;
            justify-content:space-between;
            align-content:center;
            margin:0 auto;
            margin-top:10px;
            color:white;
            font-size:30px;
          }
          

          垂直居中，水平平分靠两边对齐
          align-content:center;和justify-content:space-between;水平垂直对齐方式可以用简写的方式place-content:center space-between;，center代表垂直方向上的对齐方式，space-between代表水平方向的对齐方式
          place-content简写方式

   • grid-auto-columns/grid-auto-rows
     用来设置多出来的项目单元格的宽和高
     设置一个三行三列的格子，并且多出第10个没有定义高度的格子，这个格子默认会自动拉满延伸到容器的底部

         .box{
             border:1px solid #000;
             display:grid;
             width:500px;
             height:520px;
             grid-template-rows:120px 120px 120px;
             grid-template-columns:120px 120px 120px;
             column-gap:10px;
             row-gap:30px;
             margin:0 auto;
             margin-top:10px;
             color:white;
             font-size:30px;
           }
     

     自动拉满延伸到容器的底部
     我们可以设置多出的格子的高度grid-auto-rows:30px;,如图所示，第10个格子的高度是30px
     设置多出的格子的高度
     如果排列的方式是先列后行，多出的格子默认是延伸到容器的右侧
     延伸到容器的右侧
     想设置多出的格子的宽度就需要设置grid-auto-columns:30px

        .box{
             border:1px solid #000;
             display:grid;
             width:500px;
             height:520px;
             grid-template-rows:120px 120px 120px;
             grid-template-columns:120px 120px 120px;
             column-gap:10px;
             row-gap:30px;
             grid-auto-flow:column;
             grid-auto-columns:30px;
             margin:0 auto;
             margin-top:10px;
             color:white;
             font-size:30px;
         }
     

     如图所示，设置后第10个格子的宽度

     
     设置后第10个格子的宽度

2. 项目属性

   • grid-column-start/grid-column-end
     grid-row-start/grid-row-end
     用来指定item单元格的具体位置，根据在哪根网络线，在项目里设置，如图所示，设置N个列，就有N+1个列网络线，行也是
     

     网络线
     例如设置第一个单元格占两个列格子，占两个行格子，第二个单元格占一个列格子，占两个行格子，紧跟在第一个单元格后面

       .box{
             border:1px solid #000;
             display:grid;
             width:500px;
             height:520px;
             grid-template-rows:120px 120px 120px;
             grid-template-columns:120px 120px 120px;
             column-gap:10px;
             row-gap:30px;
             margin:0 auto;
             margin-top:10px;
             color:white;
             font-size:30px;
         }
         .div1{
           background:red;
           grid-column-start:1;
           grid-column-end:3;
           grid-row-start:1;
           grid-row-end:3;
         }
         .div2{
           grid-column-start:3;
           grid-column-end:4;
           grid-row-start:1;
           grid-row-end:3;
           background:green;
         }
     

     如图所示，grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:3;可以简写为grid-row:span 2;grid-column:span 1;，也可以简写为grid-row:1 / 3;grid-column:3 / 4;
     

     设置单元格占的位置和大小

   • grid-area
     用来指定item单元格的具体位置，使用时要与容器属性grid-template-areas一起使用

       .box{
             border:1px solid #000;
             display:grid;
             width:500px;
             height:520px;
             grid-template-rows:120px 120px 120px;
             grid-template-columns:120px 120px 120px;
             column-gap:10px;
             row-gap:30px;
             margin:0 auto;
             margin-top:10px;
             color:white;
             font-size:30px;
             grid-template-areas:"a a c"
                          "a a g"
                          "i j k"
                          "m n o";
           }
           .div1{
             grid-area:a;
             background:red;
           }
     

     如图所示，div1设置了单元格放在a区域内，grid-area除了与容器属性grid-template-areas一起配合使用外，还可以单独来使用grid-area:1 / 1 / 3 / 3;，其实和grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;一个意思，也可以达到下图效果
     

     grid-area来设置单元格的位置大小

   • justify-self/align-self
     设置单元格内容的水平垂直位置，和 justify-items、align-items属性的用法完全一致，但只作用于单个项目

     1. 水平方向上justify-self:start|end|center|stretch;

     2. 垂直方向上align-self:start|end|center|stretch;

        • start起始方向对齐
        • center居中对齐
        • end末尾方向对齐
        • stretch延伸，以填满整个单元格，默认值
          例如设置第一个单元格水平方向居中对齐justify-self:center;，垂直方向居中对齐align-self:center;,第二个单元格水平方向末尾对齐justify-self:center;，垂直方向开头对齐align-self:center;

          .box{
            border:1px solid #000;
            display:grid;
            width:500px;
            height:520px;
            grid-template-rows:120px 120px 120px;
            grid-template-columns:120px 120px 120px;
            column-gap:10px;
            row-gap:30px;
            margin:0 auto;
            margin-top:10px;
            color:white;
            font-size:30px;
          }
          .div1{
            background:red;
            justify-self:center;
            align-self:center;
          }
          .div2{
            background:green;
            justify-self:end;
            align-self:start;
          }
          

          只作用自己单元格的对齐方式
          align-self:start;和justify-self:end;水平垂直对齐方式可以用简写的方式place-self:start end;，start代表垂直方向上的对齐方式，end代表水平方向的对齐方式

终于搞完了！