CSS的grid布局

grid布局对比

简单说一下问题！在之前的 flex 布局用起来简单，但是有点繁琐！尤其分布两边窄！中间粗的问题
还有排序的最后一行 都很不友好
接下来记住一句话：行排 竖列

---

开始上手

切记：不要定义里面box的宽度！高度你自己定义。
因为grid-template-columns就是占比
如果两个grid-template-columns: 1fr 1fr 1fr;
默认竖列贴紧没缝隙 使用gap作为间距

<div class="box">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>
<style>
      .box{
          display: grid;
          grid-template-columns:1fr 1fr 1fr;
          gap: 50px;
      }

      .box div{
          background: #000;
          height: 100px;
      }
</style>
       

---

定义其中一列的宽度 其他自动填充
grid-template-columns: 1fr 300px 1fr 1fr;

---

2fr则是站两个位置的意思
grid-template-columns: 1fr 2fr 1fr 1fr;

---

写代快捷方式,就是5个，每个固定1fr

  <style>
      .xx{
          display: grid;
          grid-template-columns: repeat(5,1fr);
          gap: 30px;
      }
  </style>

---

gap说明

其实这个类似于margin 你可以单独 也可以统一

.box{
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  column-gap: 10px;
}

---

.box{
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  column-gap: 10px;
  row-gap: 50px;
}

---

---

先高低 后左右！就是第一行和第二行得距离50px，然后第一行进行左右10px

.box{
   display: grid;
   grid-template-columns:1fr 1fr 1fr;
   gap: 50px  10px;
}

---

响应式布局

---

单独占多行

第一你需要单独选一个子元素
第二分清 横排 竖列
第三决定出发点是1 还是 2.你用得第二个div 起名为b，上来1/3
就会使用第一个div冲突

raw就是行 一行语句 两行语句那种从左往右
column就是竖着 作为一列, 类似食堂打饭或者火车买票 竖着一列

但是有人问:我明明想占用两个位置！！凭啥是1/3的3呢？
1是启发点 3是终点

这个3不是1个2个盒子合并成一个。
他得3 类似于那个xy坐标

<style>
    .box {
        min-height: 500px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap:30px;
    }
    .a { background: hsl(166.15deg 83.4% 37.86%); }
    .b {
        /* grid-row: 1/3 */ 
        grid-column: 2/4; }
</style>
          
<div class="box">
  <div class="a"></div>
  <div class="a b"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

切记 这个是把一个盒子撑饱变成大猪 不是把两个附近得盒子 合并