CSS Grid 是一种新的网格布局系统，它可以帮助前端工程师更好地布局页面、管理网页排列、创建一些看起来很酷的样式等等。这里，我们要探讨的是 CSS Grid 项目中的共宽行。
什么是共宽行
"共宽行" 这个概念指的是我们在网格布局中，将一组行 (track) 合并为一个单元格 (cell) 的过程。这样一来，在这个单元格中的两个或更多的项 (item) 就可以共享同一行的宽度。
比如，我们可以通过下面的代码将两行合并成一个共宽行：
grid-row: 1 / span 2;
这样一来，这个单元格中的两个项就继承了共宽行的相同宽度。
共宽行的作用
共宽行可以为网格布局中的项目提供更好的布局和排版功能。在一个网格容器中，如果我们需要让一些项目之间共享相同的宽度，那么共宽行就是一个很好的实现手段。
比如，在一个商品列表中，我们希望所有的商品名称和价格都采用同样的布局，都能分享相同宽度的行。那么我们可以在 CSS Grid 中创建一个共宽行，然后将名称和价格都放在这个共宽行里。
如何实现共宽行
实现共宽行的过程并不难，我们只需要通过一些简单的 CSS 代码即可。
首先，我们需要创建一个网格容器。在这个容器中，我们用 grid-template-rows 属性定义网格行的高度、数量、起始位置和结束位置。如果我们需要创建一个共宽行，我们可以使用 grid-row-start 和 grid-row-end 属性将多个行合并成一个单元格。
比如，我们可以使用下面的代码创建一个包含两个共宽行的网格容器：
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- - ----- - ------- --- ----- ------ - ------- - --------- - - ---- -- - ------- - --------- - - ---- -- -
这个容器将会被分成四个行和四个列。在第一行和第二行之间，我们定义了第一个共宽行 (grid-row: 1 / span 2)。 在第三行和第四行之间，我们定义了第二个共宽行 (grid-row: 3 / span 2)。
然后，我们可以在这个网格容器中添加项目。这些项目会按照我们定义的行、列来自动布局。
-- -------------------- ---- ------- ---- ------------------ ---- ----------- ------------ ------- ---- ----------- ------------ ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ------
最后，我们在 CSS 中为这些项目添加样式。
.item {
border: 1px solid black;
}这样一来，我们就成功地创建了一个包含两个共宽行的网格容器，并且所有的项目都按照我们定义的行、列自动布局。如果你想要在你的网格布局中使用共宽行，那么上面的代码就是个很好的开始。
总结
CSS Grid 是一个复杂而强大的布局系统，可以帮助前端工程师更好地布局网页、管理网页排列、创建一些看起来很酷的样式等等。在网格布局中，共宽行可以为网格容器中的项目提供更好的布局和排版功能。为了在你的项目中实现共宽行，你只需要通过一些简单的 CSS 代码就可以完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483d03948841e989430e67b