就你小子还不会 Grid布局是吧？

CSS Grid 的功能远比我们想象的要强，很多人对 Gird 布局仅仅局限于了解或者一知半解，殊不知它是 CSS 语言中最牛逼的部分之一

但即使如此，我身边还是很多人一把 display:flex梭哈的人，我尝试和他们沟通，让他们上手体验 grid强大布局，而他们直接来句：“flex 又不是不行？”

嘿？他 * 的还真就不行！

今天，我立志把 CSS Grid 讲透、讲明白，让你以后见到它就如同见到黑丝一样抓狂

CSS Grid 虽然强大，但它存在部分兼容性的问题。自 2017 年以来，所有主要浏览器都支持它！

根据 caniuse 的说法，97.8% 的用户支持 CSS Grid^[1]^，也就是说：浏览器基本上都兼容了

初识 Gird

使用 gird布局十分简单，只需要将 display属性设置为 grid即可：

.wrapper {
  display: grid;
}

默认情况下，CSS Grid 的列是独占一行的，其宽度随父盒子大小

其工作原理如下：

在例子中，我们可以看的出：栅格父对象的高度不固定，由其子对象的数量和高度来决定。但是如果我们给父级网格一个固定的高度，而子级网格不设置高度呢？在这种情况下，总表面积被分成大小相等的行：

Gird 网格

我们上面提到，CSS Grid 在默认情况下是单列布局的，如果需要多列，可以使用 grid-template-columns属性：

通过传递两个值到 grid-template-columns - 25%和 75%，将 CSS 网格算法将元素分成两列。

除了通过 %来设置子对象的宽度，还可以使用任何有效的 CSS 长度百分比值^[2]^定义列，包括 pixels、 rems、viewport units等。此外，我们还可以访问一个新单位，即 fr单位：

fr的计算类似分子与分母的计算，在例子中:

分母为 4fr=1fr+3fr，也就是我们把全部 fr 加起来则为分母的大小

分子为每列的 fr 大小，第一列分子为 1fr，第二列分子为 3fr

这意味着总共有 4 个空间单位，也就是分母；第一列占用了可用空间的 1/4，而第二列占用了 3/4

Hold down！Hold down！信不信我反手就给你一锤子，你说的这个和百分比有啥区别？

别急别急，我们先看下面这个案例

「尝试缩小此容器以查看差异」

在这个案例中，我们可以发现：

% 模式下：随着父容器的缩放，当子容器分配到的空间过小时，🍎的容器会被挤压

fr 模式下：即使父容器宽度再小，🍎的容器都不会被挤压，能保持正常展示

• %单位的列宽是严格按照父容器大小来分配空间的
• fr 单位的列宽是灵活的，该列会基于父容器大小分配空间，但不会缩小到低于其最小内容的大小

除此之外，当我们使用 gap属性时，%和 fr也会有表现差异

gap 是什么属性？

gap 可以为网格中的所有列和行之间添加固定的空间

当我们添加 gap时，试试百分比和分数之间切换时会有哪些差异：

可以发现，使用 %时，子容器溢出了父容器之外，前面我说过：%单位的列宽是严格按照父容器大小来分配空间的

因此使用 %单位时，在分配空间前：先是根父容器区域的大小计算出了子容器的大小，当我们添加 16px 的 gap时，空间不够用只能溢出父容器

而使用 fr单位，则是先减去 gap的大小，再将剩余的空间分配给其他网格列

隐式和显式行

当我们设置父容器 grid-template-columns: 1fr 3fr;，而子容器超过两个时，效果是怎么样的？

我们来试试

嘿！和我们想要的预期效果一样，真的给我们换行去了，我们就是需要这么灵活的效果

除此之外，我们还可以显式地分配行的空间大小，可以使用 grid-template-rows属性来实现：

通过定义 grid-template-rows和 grid-template-columns，我们可以自由的分配行和列的空间大小

repeat 实现重复分配

假设我们要实现一个日历的效果

经过上面的学习，我们想实现这样的布局并不难：

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

吓死宝宝了，还好只是 7 列！

😈老板：不行，我现在要求 50 列、100 列的效果都做一遍，方便我对比效果，再决定选哪种方案

幸好！！Grid 的设计者考虑到了这个问题，我们可以通过 repeat来解决这个问题

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

完整代码如下：

子项分配

相信大家都见过在地板上铺瓷砖

今天，我们来开始学习如何铺瓷砖，以便我们在后期买房子的时候可以快速上手，🤬@#$%^&!

方向走错了，言归正传，CSS Grid 算法和铺地砖的方式十分相似：将每个子项分配给第一个未占用的网格单元

不过，这里有一件很酷的事情：我们可以将我们的项目分配给我们想要的任何单元格！子级甚至可以跨越多行 / 多列。

下面是一个演示程序，展示了其工作原理。单击 / 按住并拖动以将子项放置在网格中

Grid 允许我们指定子对象应该占据哪些网格：grid-row 、grid-column

如果我们希望子项占据单行或单列，我们可以通过其编号来指定它。将子项设置为位于第三列。grid-column: 3

网格子项还可以跨多个行 / 列拉伸。此语法使用斜杠来描述 start 和 end：

.child {
  grid-column: 1 / 4;
}

乍一看，这看起来像一个分数，1/4。但是，在 CSS 中，斜杠字符不用于除法，而是用于分隔值组。在这种情况下，它允许我们在单个声明中设置 start 和 end 列。

它本质上是下面的简写：

.child {
  grid-column-start: 1;
  grid-column-end: 4;
}

「这里有个容易误导的理解：」 我们提供的数字基于列_行_，而不是列索引。

用下面的图片来理解最容易的：

一个 4 列网格实际上有 5 列线。当我们为网格分配子项时，我们使用这些线来锚定它们。如果我们希望我们的子项跨越前 3 列，它需要从第 1 行开始，到第 4 行结束。

在像英语这样的从左到右的语言中，我们从左到右计算列数。然而，对于负行号，我们也可以按_相反_的方向从右到左计数。

.child { 
    /* 右边第二列 */ 
    grid-column: -2;
}

我们还可以混合正数和负数

请注意，子项跨越了 grid 的整个宽度，即使我们根本没有更改 grid-column 分配！

网格区域

终于要讲到 Gird 网格最牛逼的部分之一了😎

下面这张图片，展示了我们在网站建设中最常见的布局

使用我们目前所学到的知识，我们可以像这样构建它：

.grid {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
}
.header {
  grid-column: 2;
  grid-row: 1;
}
.main {
  grid-column: 2;
  grid-row: 2;
}

这实现还不够完美，有一种更符合人体工程学的方法：网格区域。

这是它的样子：

和以前一样，我们使用 grid-template-columns 和 grid-template-rows 定义网格结构。但是，我们有了这个奇怪的声明：

.parent {
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}

「以下是其工作原理：」 我们正在绘制我们想要创建的网格，然后我们给每块网格划分区域并且命名

然后，我们不是给子节点分配 grid-column 和 grid-row，而是给它分配 grid-area！

当我们希望某个特定区域跨越多行或多列时，我们可以在模板中重复该区域的名称。在此示例中，“sidebar” 区域跨越两行，因此我们在第一列中为两个单元格编写 sidebar。

「我们应该使用区域还是行 / 列？」 在构建这样的显式布局时，我真的很喜欢使用 areas。它允许我为我的网格分配赋予语义含义，而不是使用高深莫测的行 / 列数字。也就是说，当网格具有固定数量的行和列时，区域效果最佳。grid-column 和 grid-row 对于隐式网格很有用。

键盘 Tab 问题

当涉及到网格分配时，有一个很大的问题： 「Tab 键顺序仍然基于 DOM 位置， 而不是网格位置。」

用一个例子来解释会更容易。在下面的程序中，我设置了一组按钮，并使用 CSS Grid 对它们进行了排列：

在运行程序中，按钮似乎按顺序排列。通过从左到右、从上到下阅读，我们从 1 到 6。

「如果使用的是带键盘的设备，请尝试按 Tab 键浏览这些按钮。」 可以通过单击左上角的第一个按钮（“One”）来执行此操作，然后按 Tab 一次移动一个按钮。

应该看到如下内容：

从用户的角度来看，焦点轮廓在页面上跳来跳去，没有韵律或理由。发生这种情况是因为按钮是根据它们在 DOM 中的显示顺序来聚焦的。

为了解决这个问题，我们应该在 DOM 中对网格子项重新排序，以便它们与视觉顺序相匹配，这样我就可以从左到右、从上到下使用 Tab 键。

reading-order CSS 属性

CSS 工作组意识到这是 CSS Grid 的一个缺陷。必须将 DOM 顺序与视觉顺序匹配，这与能够将子项分配给特定网格单元格的目的相悖！

修复工作正在进行中。将来，reading-order CSS 属性应该允许我们指示浏览器忽略 DOM 顺序，并按照元素在屏幕上出现的顺序聚焦元素。

遗憾的是，截至 2024 年 9 月，此属性尚未在任何浏览器中实现。