CSS Grid 是一种强大的布局方式，它可以轻松地创建复杂的网格布局，而不需要使用复杂的 CSS 或 JavaScript。本文将介绍 CSS Grid 的基础知识，并通过实例来理解栅格的概念。
栅格的概念
CSS Grid 是一个二维网格系统，它由行和列组成。每个网格单元格可以包含内容，如文本、图像或其他 HTML 元素。网格行和列的数量可以根据需要进行定义，以创建所需的布局。网格项是网格中的内容，可以放置在任何网格单元格中。
创建网格
要创建一个网格，我们需要将一个元素设置为网格容器，并定义其行和列。下面是一个简单的网格示例：
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ --------- ----- - ---------- - ----------------- ----- -------- ----- -
在上面的示例中，我们将 .grid-container 元素设置为网格容器，并定义了三列和两行。我们还添加了一个 grid-gap 属性，以在网格项之间添加间距。
放置网格项
要将元素放置在网格单元格中，我们可以使用 grid-row 和 grid-column 属性。这些属性指定网格项的起始行和列和结束行和列。
<div class="grid-container"> <div class="grid-item item1">1</div> <div class="grid-item item2">2</div> <div class="grid-item item3">3</div> <div class="grid-item item4">4</div> <div class="grid-item item5">5</div> <div class="grid-item item6">6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ --------- ----- - ---------- - ----------------- ----- -------- ----- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- -
在上面的示例中，我们使用 grid-row 和 grid-column 属性来放置每个网格项。例如，.item1 元素的起始行是 1，结束行是 3，起始列是 1，结束列是 2。
响应式网格
CSS Grid 可以轻松地创建响应式网格布局。我们可以使用 @media 查询来定义不同的网格布局，以适应不同的屏幕尺寸。
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ------
--------- -----
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ ------ --- ----------- ------ -
--------------- -
---------------------- ----
------------------- ---- ---- ---- ---- ---- -----
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
-在上面的示例中，我们使用 @media 查询来定义一个不同的网格布局，以适应小于 768 像素的屏幕尺寸。在这个布局中，我们将网格容器的行定义为自动，以适应不同的内容高度。
总结
CSS Grid 是一种强大的布局方式，它可以轻松地创建复杂的网格布局。在本文中，我们介绍了 CSS Grid 的基础知识，并通过实例来理解栅格的概念。我们学习了如何创建网格和放置网格项，以及如何创建响应式网格布局。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a46ebeb4cecbf2df78fd0