Grid 网格布局Grid网格布局 fr关键字 minmax函数 auto关键字网格线的名称布局中的repeat()

布局

//html
    <div class="container">
      <div class="item" style="background-color: pink"><p>1</p></div>
      <div class="item" style="background-color: wheat"><p>2</p></div>
      <div class="item" style="background-color: yellowgreen"><p>3</p></div>
      <div class="item" style="background-color: paleturquoise"><p>4</p> </div>
      <div class="item" style="background-color: plum"><p>5</p></div>
      <div class="item" style="background-color: skyblue"><p>6</p></div>
    </div>

//style
     * {
        margin: 0;
        padding: 0;
      }
      div {
        grid-template-columns: 50px 50px 50px;
        grid-template-rows: 50px 50px 50px;
      }
   .container {
        display: grid;
        /*有几个px一排就有几个盒子*/
        grid-template-columns: 100px 200px; /*横着开始 第一个盒子宽100px 第二个盒子宽200px  */
        grid-template-rows:50px  150px 50px; /*竖着开始 第一个高100px 第二个高300px 第三个盒子高50px 如果有多个盒子,就第一个和第二个盒子高度变 其余不变*/
      }

Grid中的repeat

  .container {
        display: grid;
        /* repeat(2, 100px 20px 80px) 2:重复2次 第一个宽100px  第二个宽20px 第三个盒子80px 第四个宽100px...*/
        grid-template-columns: repeat(2, 100px 20px 80px);
        /* repeat(3, 100px) 3:重复3次 */
        grid-template-rows: repeat(3, 100px);
      }

当我们改变 repeat()里面的值时，把repeat(2, 100px 20px 80px)改成repeat(1, 100px 20px 80px)就会变成这样

 .container {
        display: grid;
        grid-template-columns: repeat(1, 100px 20px 80px);
        grid-template-rows: repeat(3, 100px);
      }0

当我们改变了上面repeat()里面的px数量时，把repeat(1, 100px 20px 80px)改成 repeat(1, 100px 20px)布局就会变成这样

      .container {
        display: grid;
        grid-template-columns: repeat(1, 100px 20px);
        grid-template-rows: repeat(3, 100px);
      }

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充

.container {
  display: grid;                         //宽100px
  grid-template-columns: repeat(auto-fill, 100px);
}

当我们在 auto-fill 后面设置多个值时，他们的的宽会跟着变化

 .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px 200px 50px);
 }

fr 关键字 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

fr 可以与绝对长度的单位结合使用，

第一列的宽度为150像素，第二列的宽度是第三列的一半。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

minmax()

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

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

auto 关键字 auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了 min-width ，且这个值大于最大宽度。

网格线的名称 grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}