CSS Grid 是现代前端布局中的一种重要技术手段，它可以方便地实现复杂的网格布局。但是，在实现某些特殊效果时，可能会遇到一些问题。本文将为大家介绍如何在 CSS Grid 中实现 “断行” 的效果，以及相关的技术要点和示例代码。
什么是 “断行”？
在平常的文本中，我们常常需要在指定位置进行换行。例如，当一行文字太长时，需要在指定位置进行自动断行。类似地，我们在进行网页布局时，也可能需要在指定位置进行 “断行”。例如，在某些电商网站中，一个商品列表被分成了若干个部分，而这些部分之间需要进行断行以增加可读性。如下图所示：
如何在 CSS Grid 中实现 “断行”？
在 CSS Grid 中，要实现 “断行” 其实是比较容易的。我们可以使用 grid-row 属性来指定一个网格元素所占据的行数。例如，对于上面的商品列表断行示意图，我们可以将其实现为如下的 HTML 结构：
-- -------------------- ---- ------- ---- --------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- -------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- -------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- -------------------- --- ------
其中，每个商品元素都包含在一个名为 product 的容器中，而每个断行元素都使用另一个名为 break 的容器来表示。接着，在 CSS 中，我们可以使用如下的代码来对布局进行定位：
-- -------------------- ---- ------- ------------- - -------- ----- ---------------------- ---------------- ------------- ------ ---- ----- - -------- - ----------------- ----- -------- ----- - ------ - --------- ----- -------------- --- ----- ----- -
其中，grid-template-columns 属性用于定义网格列的大小和数量，gap 属性用于定义相邻元素之间的间隔，而 grid-row 属性则用于指定断行元素所在的行数。具体来说，grid-row 可以使用以下的值：
auto：自动计算垂直位置，通常为从上向下的第一行。<number>：将元素放置在具体的行号上，例如grid-row: 3表示将元素放置在第三行。<start>/<end>：通过指定起始行号和结束行号的方式来进行定位，例如grid-row: 2 / 4表示将元素放置在从第二行到第四行之间。
因此，当 grid-row 属性为 auto 时，断行元素会自动出现在第一行的下方，从而起到 “断行” 的效果。如下图所示：
总结
本文介绍了如何在 CSS Grid 中实现 “断行” 的效果，主要包括在 HTML 中使用断行元素来进行标志，以及在 CSS 中使用 grid-row 属性来指定断行元素所在的行数。这一技术可以使得网页布局更加整洁和易于阅读，是前端工程师必备的一项技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64524244675af4061b5df424