Grid 使用指南

dispaly

定义一个 grid 容器 ， inline 还是 block 取决于给定的值。

.container {
  display: grid | inline-grid;
}

grid-template-columns grid-template-rows

grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

1. repeat()

   有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。

   .container {
     display: grid;
     grid-template-columns: repeat(3, 33.33%); => 33.33%, 33.33%, 33.33%
     grid-template-rows: repeat(2, 100px 20px 80px); => 100px 20px 80px 100px 20px 80px
   }
   

2. auto-fill 关键字

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

   .container {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px); // 容器中每列100px自动填充
   }
   

3. fr 关键字

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

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr; // 两列，宽度相同
   }
   

   fr可以与绝对长度的单位结合使用，这时会非常方便。代码

   .container {
     display: grid;
     grid-template-columns: 150px 1fr 2fr; // 第一列150px, 第二列是第三列的一半
   }
   

4. minmax()

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

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 第三列宽不小于100px，不大于1fr
   }
   

5. auto 关键字

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

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

6. 网格线的名称

   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];
   }
   

   上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

   网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

7. 布局实例

   grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。

   .wrapper {
     display: grid;
     grid-template-columns: 70% 30%;
   }
   

   上面代码将左边栏设为70%，右边栏设为30%。

   传统的十二网格布局，写起来也很容易。

   grid-template-columns: repeat(12, 1fr);
   

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  // 等同于
  grid-gap: 15px 10px;
}

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

.container {
  grid-auto-flow: row | column | row dense | column dense
}

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  // place-items 如果省略第二个值，则浏览器认为与第一个值相等
  place-items: <align-items> <justify-items>;
}

.container {
  justify-items: start;
}

.container {
  align-items: start;
}

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
  // place-content 如果省略第二个值，浏览器就会假定第二个值等于第一个值。
  place-content: <align-content> <justify-content>;
}

.item-8 {
  grid-row-start: 4;
  grid-column-start: 2;
}

.item-9 {
  grid-row-start: 5;
  grid-column-start: 3;
}

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
// 等于
.item-1 {
  grid-column-start: 2;
  grid-column-end: span 2; span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
}

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-1 {
  grid-area: e;
}

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}