CSS Grid 是一种新的布局方式，可以让你更轻松地创建复杂的网格布局。比如，你可以轻松地设计出一个响应式网站，让它在不同设备上看起来都很棒。
在这篇文章中，我们将介绍如何使用 CSS Grid 制作响应式设计，并提供一些示例代码。
什么是 CSS Grid？
CSS Grid 是一个用于布局的 CSS 模块，它可以以网格的形式排列网页的内容。 CSS Grid 使得在用户界面中创建网格化布局变得更加容易。使用 CSS Grid，你可以轻松地控制元素在网格中的位置、大小和间距。
如何使用 CSS Grid？
我们可以将 CSS Grid 拆分为两个部分：容器和单元格。容器是我们放置单元格的地方，而单元格是我们将内容放入的地方。
创建 CSS Grid 容器
我们可以使用 display: grid 属性来创建一个 CSS Grid 容器。
.container {
display: grid;
}创建 CSS Grid 单元格
要在 CSS Grid 容器中创建单元格，我们可以使用 grid-template-rows 和 grid-template-columns 属性。
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}上面的代码将创建一个 3x3 的网格，每个单元格都是相等的。
控制单元格的位置和大小
我们可以使用 grid-row 和 grid-column 属性来控制单元格的位置。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- - ----- - --------- - - -- -- -------- -- ------------ - - -- -- -------- -- -
上面的代码将创建一个 3x3 的网格，并将第一个单元格放置在第一行到第三行，第二列到第四列的位置。
响应式设计
使用 CSS Grid，我们可以轻松地创建响应式设计。我们只需要在媒体查询中调整网格的大小和位置即可。
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
-
----- -
--------- - - -- -- -------- --
------------ - - -- -- -------- --
-
------ ------ --- ----------- ------ -
---------- -
------------------- --------- -----
---------------------- --------- -----
-
----- -
--------- - - --
------------ - - --
-
-上面的代码将创建一个 3x3 的网格，并在小于 768px 时将其调整为 2x2 的网格，并将第一个单元格放置在第一行到第二行，第一列到第二列的位置。
示例代码
下面是一个使用 CSS Grid 制作响应式设计的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
---- -----
-
----- -
----------------- -----
-------- -----
---------------- -------
------------ -------
---------- -----
-
------------------ -
--------- - - --
------------ - - --
-
------ ------ --- ----------- ------ -
---------- -
------------------- --------- -----
---------------------- --------- -----
-
------------------ -
--------- - - --
------------ - - --
-
-上面的代码将创建一个 3x3 的网格，并将第一个单元格放置在第一行到第三行，第二列到第四列的位置。
在小于 768px 时，将其调整为 2x2 的网格，并将第一个单元格放置在第一行到第二行，第一列到第二列的位置。
结论
CSS Grid 是一种非常有用的工具，可以使网页设计变得更加容易和方便。它不仅可以加快网页的开发速度，而且可以轻松地创建响应式设计。
如果你还没有使用 CSS Grid，那么现在就开始学习吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6707d02ad91dce0dc86cab52