CSS Grid 是一种强大的布局方式，它允许我们以行和列的形式对网格进行布局。关于 CSS Grid 的优势和使用方法讨论得很多，但是很少有人关注到一个容易被忽略的问题：缺少单元格会导致布局出现问题。
问题来源
在 CSS Grid 中，我们定义网格布局时通常使用 grid-template-columns 和 grid-template-rows 来定义每行和每列的大小。但是如果在这些定义中缺少单元格，就会出现问题。例如，假设我们有一个包含两行三列的网格：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}如果我们在这个网格中缺少一个单元格，例如第一行第二列的单元格，代码可能看起来像这样：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ---- ----- - ---- - --------- -- ------------ -- -
问题表现
这个网格的布局看起来很简单，但是当我们运行代码时，会发现缺少一个单元格会导致布局出现问题。问题表现如下：
在这个示例中，第一行的第三个单元格被移到了第二行，导致第一行只有两个单元格，第二行有四个单元格，这显然不是我们想要的布局。
解决方法
要解决这个问题，我们需要按照网格的正确行和列数进行定义，否则单元格就会填充在错误的行或列中。对于缺少的单元格，我们可以使用 grid-column-start 和 grid-column-end、grid-row-start 和 grid-row-end 来填充正确的行和列。例如，对于我们之前的例子，我们可以这样修改代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ---- ----- - ---- - --------------- -- ------------- -- ------------------ -- ---------------- -- -
这段代码让我们的单元格位于正确的行和列上，问题得到解决。
总结
在 CSS Grid 中，缺少单元格会导致布局出现问题。当我们使用 grid-template-columns 和 grid-template-rows 定义网格布局时，确保按照正确的行和列数定义，如果有缺失，可以使用 grid-column-start 和 grid-column-end、grid-row-start 和 grid-row-end 来填充正确的行和列。这在实际开发中非常有用，因为网格布局经常作为前端页面布局的常用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645dd631968c7c53b0035b27