参考资料：A Complete Guide to Grid

  • 功能最强大的布局方案
  • Grid 尤其适合不规则布局
  • 二维布局用 Grid
  • 一维布局用 Flex

一些基本概念

Grid 容器（Grid Container）和 Grid 条目（Grid Item）

  1. <div class="container">
  2.   <div class="item item-1"></div>
  3.   <div class="item item-2"></div>
  4.   <div class="item item-3"></div>
  5. </div>

Grid 内部

  • Grid 线（Grid Line）
  • Grid 元件（Grid Cell）
  • Grid 轨迹（Grid Track）
  • Grid 区域（Grid Area）

4.png

语法

指定 container

  1. .container {
  2.   display:grid;     /* 生成块级网格 */
  3.   display:inline-grid;    /* 生成内联级网格 */
  4. }

设置每个行的高度和每列的宽度

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

效果如下：
9.jpg

给行命名

  • 注意行名称的括号语法：

    1. .container {
    2. grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    3. grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    4. }

    效果如下：
    10.jpg

    取名的作用

  • item 可以设置范围

    1. .item-a {
    2.   grid-column-start: 2;
    3. grid-column-end: five;
    4. grid-row-start: row1-start;
    5. grid-row-end: 3；
    6. }

    fr-free space 巧记：“份儿”

  • 该 fr 单位允许您将轨道的大小设置为网格容器可用空间的一部分。

    1. .container {
    2. grid-template-columns: 1fr 1fr 1fr;
    3. /* 将每个项目设置为网格容器宽度的三分之一 */
    4. }

  • 可用空间是在任何非灵活项目之后计算的 。

  • 下列代码中 fr 单元可用的可用空间总量 不包括 50px
    1. .container {
    2. grid-template-columns: 1fr 50px 1fr 1fr;
    3. /* fr 单元可用的可用空间总量 不包括 50px */
    4. }

    一行可以有多个名称

    例如：👇代码中第二行将有两个名称：row1-end和row2-start：
    1. .container {
    2. grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
    3. }

    用 repeat() 符号来定义包含重复部分的简化：

    1. .container {
    2. grid-template-columns: repeat(3, 20px [col-start]);
    3. }
    这相当于：
    1. .container {
    2. grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
    3. }

    多行共享相同名称用行名和计数来引用它们

    1. .item {
    2. grid-column-start: col-start 2;
    3. }

    定义一片区域

    ```css .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”; }

  1. 这将创建一个四列宽、三行高的网格。整个顶行将由标题 区域组成 。<br />中间一行将由两个主要区域、一个空单元格和一个侧边栏区域组成。最后一行都是 页脚。<br />![11.jpg](https://cdn.nlark.com/yuque/0/2021/jpeg/22104007/1630768492816-f5bde475-64b9-4b22-84de-c815cda090f6.jpeg#clientId=u1fcaaabb-76f7-4&from=ui&height=262&id=u256b45a6&margin=%5Bobject%20Object%5D&name=11.jpg&originHeight=792&originWidth=1150&originalType=binary&ratio=1&size=54235&status=done&style=none&taskId=udbef0bf6-d673-4acf-a32b-183b3de20b9&width=381)
  2. <a name="Q2d2K"></a>
  3. #### 设置列 / 行之间的间距宽度 `gap`
  4. ```css
  5. .container {
  6.   grid-template-columns: 100px 50px 100px;
  7.   grid-template-rows: 80px auto 80px; 
  8.   column-gap: 10px;
  9.   row-gap: 15px;
  10. }

12.jpg

grid 属性太多，可以现学现用，参考本文开头处列出的网址。

等到 Grid 普及了，前端对 CSS 的要求会进一步降低