grid布局

当开发中遇到自适应两端对齐，最后一行需要元素左对齐的布局（移动端外卖，网购页面的金刚位）。我的第一印象会想到使用flex布局中的justify-content: space-between来实现。效果还是挺好的，但随着盒子里元素变多，一排放不下的时候还使用flex布局就出现问题了。可以发现当子元素数量为5个，且父元素的宽度只能够支持一行放三个的时候就出现问题了。

这里我们就需要用gird布局来解决

注意： 设为网格布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align 将失效

.grid {
	width:500px;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    gap: 25px;
}

grid布局常用的属性

1. grid-template-columns 设置每列的宽度

   上面示例中grid-template-columns: 150px 150px 150px;，设置了三列，每一列150px的宽度

2. grid-template-rows 设置每行的宽度

   用法和grid-template-columns一样 不多写了

3. grid配合place-content 设置子元素在父元素中的位置

   place-content:(align-content) (justify-content)
   place-content: center //相当于 align-content:center justify-content:center 竖直水平方向居中
   

   这里顺便补充一下place-content和place-items的区别

   • 如果同时在网格容器上设置了 place-content 和 place-items，place-items 的设置会覆盖 place-content 的设置。
   • place-content 主要用于控制整个网格内容在网格容器内的位置和对齐方式，而 place-items 则用于设置每个网格项目在网格容器内的对齐方式。

   justify-items: start | end | center | stretch;
   align-items: start | end | center | stretch;
   place-items: start | end | center | stretch;
   

4. grid-gap 设置间距

   grid-gap:(grid-column-gap) (grid-row-gap);
   // grid-column-gap和grid-row-gap的合并简写形式，也可直径写做 gap
   gap: 25px  //相当于 grid-gap: 25px ||  grid-row-gap: 25px  grid-column-gap: 25px
   // 表示列之间的间距和行之间的间距都为25px
   

5. repeat() 函数，minmax()函数 和 auto/auto-fill/fr 关键字联合使用

   grid-template-columns: repeat(3, 150px); // 3列， 每列150px  示例中可用此方法代替
   grid-template-columns: repeat(3, 1fr);  // 3列每列等宽
   grid-template-columns: repeat(auto-fill, 150px)  //自动分配列数，每列150px
   grid-template-columns: 150px auto; // 第一列150px，第二列自适应剩余空间
   grid-template-columns: 1fr 1fr minmax(150px, 2fr) // 第一列第二列1等分空间，第三列最小150px,正常为2等分的空间
   

grid可以实现的布局

1. 金刚位的布局

2. 左边固定宽度，右侧自定义宽度

3. 可以做到水平垂直居中

4. 圣杯布局
   

   <div class="grid-container">
      <div class="a">aaaaa</div>
           <div class="b">
               <div>b1</div>
               <div>b2</div>
               <div>b3</div>
           </div>
       <div class="c">ccccc</div>
   </div>
   
   <style>
           .grid-container {
               width: 800px;
               height: 400px;
               display: grid;
               grid-template-rows: 100px auto 100px;
               background-color: blue;
               gap: 10px;
           }
           .grid-container div {
               background-color: yellow;
           }
           .grid-container .b {
               display: grid;
               grid-template-columns: 100px auto 100px;
               background-color: green;
               gap: 20px;
           }
   </style>
   

5. 表格