在现代的网页设计中，响应式布局已经成为了一个非常重要的概念，因为越来越多的人正在使用移动设备来访问网站。可以使用 CSS Grid 实现基本响应式布局，这是一种非常强大和灵活的布局方式。在这篇文章中，我们将向您展示如何使用 CSS Grid 实现基本响应式布局并逐步引入更高级的概念，比如自动布局和媒体查询。
创建基本网格
首先，我们需要创建一个包含两列的基本网格。我们可以通过下面的CSS代码来定义：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}在上面的代码中，我们使用 display: grid 将容器转换为一个网格容器，并使用 grid-template-columns 属性来定义容器中列的数量和宽度。通过 1fr 值，两列将具有相等的宽度。
现在，我们可以将一些内容放在这两列中，如下所示：
<div class="container"> <div>第一列</div> <div>第二列</div> <div>内容 1</div> <div>内容 2</div> <div>内容 3</div> <div>内容 4</div> </div>
在上面的代码中，我们将两列放置在一个 div 容器中，并将一些内容放置在每一列中，以便我们可以肉眼观察结果。
现在，我们可以看到两列的宽度相等，并且每一列中的内容都垂直对齐。这个基本网格是一个固定的宽度，不适应浏览器的宽度变化。
转化为响应式布局
为了使这个网格成为响应式布局，我们需要使它适应不同的屏幕大小。我们可以实现这一点通过使用 CSS 的媒体查询和自动布局。
媒体查询
首先，我们可以使用媒体查询来检测屏幕的宽度，并根据需要更改我们的样式。媒体查询是使用 @media 关键字定义的，例如：
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}在上面的代码中，我们定义了一个媒体查询，用于检测屏幕宽度不超过 600 像素。在该媒体查询中，我们使用 grid-template-columns 属性将容器中的列数更改为一个。这样，当屏幕宽度小于 600 像素时，内容就会垂直显示而不是水平显示。
为了验证这个媒体查询是否有效，我们可以尝试更改浏览器窗口的大小，并查看内容是否发生变化。可以通过以下代码进行验证：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---------- -
---------------------- ----
----------------- ----
-
-
------ ------ --- ----------- ------ -
---------- -
---------------------- --- ----
----------------- -----
-
-在上面的代码中，我们添加了一个背景颜色，以便更好地查看媒体查询是否正在工作。可以看到，当屏幕宽度小于 600 像素时，容器的背景颜色将变为红色，而当屏幕宽度大于或等于 600 像素时，容器的背景颜色将变为蓝色。
自动布局
其次，我们可以使用自动布局来使内容动态地排列。自动布局使我们能够在不知道网格大小的情况下自动布置网格。这可以通过定义一个可重复使用的模板和使用 repeat() 函数来完成。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}在上面的代码中，我们使用 repeat() 函数来定义自动布局的列。auto-fit 关键字允许网格在适应容器宽度的同时自动适应内容。minmax() 函数允许我们定义每一列的最小和最大值。在上面的例子中，每一列的最小值为 200 像素，并且将自动适应大于 200 像素的容器宽度。
现在，在窗口大小变化时，我们将能够动态地调整内容来适应窗口大小。
总结
本文给出了一个基本的 CSS Grid 网格布局和如何将其转换为响应式布局的示例。我们学习了如何使用媒体查询来检测屏幕大小，以及如何使用自动布局来自适应内容和屏幕大小。希望这篇文章对您有所帮助，让您更好地理解 CSS Grid 布局的基本概念，并在设计网站时使用响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461a13b968c7c53b02fb3e7