CSS Grid 是一个强大的布局工具，可以让我们以一种更直观的方式处理网页布局。但是，当我们使用 Grid 布局时，有时会遇到一些空白行或列的问题。这些空白行或列可能会影响我们的布局，因此我们需要知道如何处理它们。
什么是空白行或列
空白行或列是指在 Grid 布局中，没有任何元素的行或列。这些行或列可能是由于网格单元格大小不一致，或者是由于某些元素跨越了多个单元格而产生的。在下面的示例中，我们可以看到一个具有空白行和列的 Grid 布局：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ --------- ----- - ----- - ------------ - - -- --------- - - -- - ----- - ------------ - - -- --------- - - -- - ----- - ------------ - - -- --------- - - -- -展开代码
在上面的示例中，我们定义了一个具有 3 列和 3 行的网格布局，并在其中放置了三个盒子。但是，由于第一行和第二列中没有任何元素，因此它们看起来像是空白的。
如何处理空白行或列
有几种方法可以处理空白行或列。以下是一些常用的方法：
方法一：使用 grid-auto-flow 属性
我们可以使用 grid-auto-flow 属性来指定 Grid 布局中如何填充空白行或列。该属性有两个值可选：row 和 column。
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px; grid-auto-flow: row; }
在上面的示例中，我们将 grid-auto-flow 属性设置为 row，这意味着任何空白列都会被填充以保持行的连续性。
同样地，我们也可以将 grid-auto-flow 属性设置为 column，这意味着任何空白行都会被填充以保持列的连续性。
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px; grid-auto-flow: column; }
方法二：使用 grid-template-areas 属性
我们还可以使用 grid-template-areas 属性来手动指定网格单元格的位置。通过在网格布局中创建一个空白单元格，我们可以强制填充任何空白行或列。
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ --------- ----- -------------------- ------- ------ -- ----- ---- -- ------- ------ --- - ----- - ---------- ------- - ----- - ---------- ----- - ----- - ---------- ------- - ------ - ---------- ------ -展开代码
在上面的示例中，我们使用 grid-template-areas 属性来定义了一个具有空白单元格的网格布局。通过将第三列命名为空白单元格，我们可以强制填充任何空白行或列。
方法三：使用 grid-column 和 grid-row 属性
最后，我们可以使用 grid-column 和 grid-row 属性来手动指定网格单元格的位置。通过在单元格中定义一个空白元素，我们可以强制填充任何空白行或列。
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ --------- ----- - ----- - ------------ - - -- --------- - - -- - ----- - ------------ - - -- --------- - - -- - ----- - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- -展开代码
在上面的示例中，我们使用 grid-column 和 grid-row 属性来定义了一个具有空白元素的网格布局。通过将空白元素放置在第一行第二列的单元格中，我们可以强制填充任何空白行或列。
结论
当使用 CSS Grid 布局时，空白行或列可能会成为问题。然而，通过使用 grid-auto-flow、grid-template-areas 和 grid-column/grid-row 属性，我们可以轻松地处理这些问题，并创建出更好的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753b3738bd460d3ada6eda1
