CSS Grid 是一种用于网页布局的强大工具，并且配合媒体查询可以实现响应式布局，使网页在不同的屏幕尺寸下都能够优美地展示。本文将介绍如何使用 CSS Grid 实现媒体查询布局，并提供示例代码以供参考。
媒体查询
在 CSS Grid 之前，实现响应式布局通常使用媒体查询。媒体查询是一种 CSS 技术，用于根据设备的尺寸、分辨率和方向等特性来确定应用哪些 CSS 规则。
媒体查询通常以以下格式书写：
@media (min-width: 768px) {
/* 在宽度大于等于 768px 时应用的 CSS 规则 */
}上面的媒体查询规则表示，在屏幕宽度大于等于 768 像素时应用包含的 CSS 规则。同样，我们可以使用 max-width 选项来指定屏幕的最大宽度。
CSS Grid
CSS Grid 是一个二维网格布局系统，它允许开发者创建并分配网页元素，创建出现代化布局。CSS Grid 是一种强大的布局工具，其比较特殊的地方在于，开发者可以将网页内容分配到一个父级网格容器中，这个容器就是横列，纵列的二维空间。我们可以在其中的每个单元格内放置网页元素。如下是 CSS Grid 的部分代码示例:
.grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-gap: 10px;
}上面的代码将一个包含 9 个网格单元格的容器进行了定义。其中 grid-template-columns 属性定义了容器的列数和每列的宽度，而 grid-template-rows 属性定义了容器的行数和每行的高度。grid-gap 则是每个网格之间的空隙。
媒体查询布局
使用 CSS Grid 和媒体查询结合在一起，我们可以轻松地实现响应式布局。以一个简单的栅格系统为例，在普通屏幕上该栅格系统显示为两列，而在移动设备上显示为单列。
以下是 CSS Grid 实现这个栅格系统的代码：
-- -------------------- ---- -------
------
-------- -----
---------------------- --------- -----
--------- -----
-
----------------- -------
------
---------------------- ----
-
-上述代码定义了一个包含两列的栅格，列之间的距离为 20px。然后使用 @media 媒体查询设置当屏幕宽度小于等于 767px 时，将栅格的列数设置为一个。
我们可以通过以下示例代码来查看 CSS Grid 和媒体查询结合实现的响应式栅格系统：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------- ----- ---------- ---- --------------
-------
---- -
------- --
-------- --
---------- -----
------------ ------ -----------
------ -----
-
---------- -
---------- -------
------- - -----
-------- -----
-
----- -
-------- -----
---------------------- --------- -----
--------- -----
-
----- -
----------------- -----
-------- -----
-------------- ----
----------- -------
-
----------------- ------ -
----- -
---------------------- ----
-
-
--------
-------
------
---- ------------------
---- -------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
------
-------
-------结论
在本文中，我们介绍了如何使用 CSS Grid 和媒体查询实现响应式布局。用 CSS Grid 的方式，使开发者可以非常方便的定义页面栅格系统，而媒体查询的存在则可以让我们在不同设备上优化体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fb077e884a3e30f2fbda5