在网页设计中，我们经常需要考虑不同设备尺寸的适配问题。而 CSS Grid 是一个非常强大的布局工具，它可以帮助我们轻松地实现网页的布局。本文将介绍如何搭配媒体查询，利用 CSS Grid 实现网页的适配。
什么是 CSS Grid
CSS Grid 是 CSS 中的一种新布局模式，它可以帮助我们快速、灵活地实现网页布局。它允许我们将网页划分为若干行和列，然后将元素放置在这些行和列中。这使得网页布局变得更加直观和易于维护。以下是 CSS Grid 的一些基本概念：
- 网格容器（Grid Container）：一个元素被指定为网格容器后，它的子元素就可以被放置在网格中。
- 网格线（Grid Line）：划分网格的线，可以是行线或列线。网格线用数字来表示，从 1 开始编号，也可以用关键字来表示，例如 start 和 end。
- 网格单元格（Grid Cell）：由四根相邻的网格线围成的矩形区域。
- 网格轨道（Grid Track）：两根相邻网格线之间的空间。可以是行轨道或列轨道。
- 网格区域（Grid Area）：由多个网格单元格组成的一个矩形区域。
如何搭配媒体查询使用 CSS Grid
CSS Grid 与媒体查询的结合使用，可以帮助我们在不同的设备上实现网页布局的适配。我们通常会使用 min-width 和 max-width 属性来设置媒体查询，以便根据不同屏幕大小应用不同样式。
首先，我们需要定义一个网格布局容器，例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}上述代码表示创建一个含有 3 列、每列宽度相等的网格布局容器，并定义了列之间的间隔为 20px。接下来，我们可以向网格容器中添加元素：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div>
上面的代码表示向网格容器中添加 6 个元素，每个元素为一个盒子，并按顺序在网格中排列。
接下来，我们可以使用媒体查询来根据不同屏幕宽度应用不同的样式。例如，对于移动设备，我们可以将网格布局改为单列布局：
@media(max-width: 480px) {
.container {
display: block;
}
}上述代码表示当屏幕宽度小于等于 480px 时，将网格布局改为单列布局。这样，当用户在移动设备上访问网页时，网格网格便会变为单列布局，元素将依次堆叠在一起。
当然，我们也可以根据屏幕宽度的变化调整列的数量。例如，当屏幕宽度小于等于 780px 时，将网格布局改为两列布局：
@media(max-width: 780px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}上述代码表示当屏幕宽度小于等于 780px 时，将网格布局改为两列布局。
这样，我们就可以根据屏幕大小实现网页的适配了。下面是完整的示例代码：
-- -------------------- ---- -------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
---------- -
-------- -----
---------------------- --------- -----
--------- -----
-
----------------- ------ -
---------- -
---------------------- --------- -----
-
-
----------------- ------ -
---------- -
-------- ------
-
-
--------总结
本文简单介绍了 CSS Grid 的使用，并说明了如何搭配媒体查询来实现网页的适配。通过了解 CSS Grid 的基础概念和属性，我们可以轻松地实现网页的布局，并在不同的设备上自动适应。希望本文能对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468b0ae968c7c53b08dea2f