CSS Grid 布局是一种强大的布局方式，它允许我们以网格方式来布局页面。在 Grid 布局中，我们可以使用 grid-column 和 grid-row 属性来控制单元格所跨越的行列数。本文将详细介绍如何使用这两个属性来实现灵活的布局。
grid-column 属性
grid-column 属性用于指定单元格所跨越的列数。它的语法如下：
grid-column: <start-line> / <end-line>;
其中，<start-line> 和 <end-line> 分别指定单元格的起始列和结束列，可以使用数字、关键字（如 auto、span）或者网格线的名称来表示。如果只指定一个值，那么该值就是 <end-line>，<start-line> 默认为 1。
例如，下面的代码将第一个单元格设置为跨越前两列：
-- -------------------- ---- -------
---- -----------------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------- -----
-
------ -
------------ - - ---- --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
--------
grid-row 属性
grid-row 属性用于指定单元格所跨越的行数。它的语法和 grid-column 类似：
grid-row: <start-line> / <end-line>;
其中，<start-line> 和 <end-line> 分别指定单元格的起始行和结束行，可以使用数字、关键字（如 auto、span）或者网格线的名称来表示。如果只指定一个值，那么该值就是 <end-line>，<start-line> 默认为 1。
例如，下面的代码将第一个单元格设置为跨越前两行：
-- -------------------- ---- -------
---- -----------------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------- -----
-
------ -
------------ - - --
--------- - - ---- --
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
--------
综合使用
当我们需要控制单元格所跨越的行列数时，可以同时使用 grid-column 和 grid-row 属性。
例如，下面的代码将第一个单元格设置为跨越前两行和前两列：
-- -------------------- ---- -------
---- -----------------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------- -----
-
------ -
------------ - - ---- --
--------- - - ---- --
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ - - --
--------- - - --
-
--------
总结
使用 grid-column 和 grid-row 属性可以轻松实现单元格的灵活布局。在使用时，我们需要注意单元格所跨越的行列数，以及网格线的名称。通过综合使用这两个属性，我们可以实现更加复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65febea7d10417a2229f519f