响应式网页就是写多套css,使用CSS网格创建响应式网页布局

我们将复制该列表项目和其中的所有内容六次，以便我们可以玩的项目。如果你想知道，我们决定在这里使用ul元素，因为这是一个条目列表。随意使用任何感觉适合您。

在列表项目的内部，我们有一个包含.boxes__text-wrapper类的div，它将包含案例研究的标题及其附带的描述。

02.写基础风格

我们将字体设置为更好，并从标题和段落中删除了默认保证金

现在我们来设定一些基础样式来处理。

我们已将字体更改为Avenir。我们将从我们的标题和段落中删除边距，并重新设置无序列表。我们还会为每个列表项提供一些默认样式，以帮助我们查看每个样式。

03.设置你的网格

只有三条线，我们在我们的网格项之间添加了一条沟，并使它们更高一些

我们首先要构建我们的手机布局。在小屏幕上设置我们的网格就像这样简单：

网格将我们的项目堆叠在一起，因为默认情况下只有一列。我们将通过使用grid-gap在每个案例研究之间创建一些空间- 这样我们可以在行和列之间添加一个沟槽。

忘记添加一个页边距只需要复杂的第n个子选择器; 沟槽仅出现在列或行之间，从不在列或row之前或之后.grid-gap是grid-column-gap和grid-row-gap的缩写 
 。通常我们会用这个手段，但随着浏览器的增长，我们将会覆盖这两个方面，所以我们将使用速记。

接下来，我们将使用网格自动行来告诉我们的网格容器新行的高度。网格将创建新行以放置所有内容。我们可以使用grid-auto-rows属性来控制这些自动创建的行的大小。我们正在使用一个可用的新功能：minmax()。使用minmax()我们可以指定最小大小和最大大小。

使用我们的代码，我们说我们希望我们的行最小为120px，最大为auto。我们在这里使用auto，因为如果内容需要，我们希望我们的行增长。

04.设置大浏览器兼容性

我们的网格正在形成！我们有六列在我们的网格项目之间工作和更少的沟槽

我们设置我们的页面，以便当我们的浏览器为40em或更大时，我们的网格容器有六列，每列一个。

grid-template-columns是我们用于告诉我们的网格的属性，应该存在多少列。它接受我们知道和喜欢的所有长度单位，如rem，em，px，percent， 
 vw，vh和fr。

该FR是我们用CSS网格布局得到一个新的单位。有了它，我们可以告诉浏览器做数学而不是我们 - 优秀。

通过告诉浏览器创建一个分数的六列，浏览器将计算我们的网格容器的宽度并将其拆分成六个相等的列。另外，因为网格很聪明，所以在计算我们指定的沟槽之后，它只会划分剩下的空间。

个人物品

咖啡使一切看起来更好不是吗？此外，微妙的渐变使我们的标题和描述脱颖而出

我们的案例研究看起来只是灰色的盒子。我们添加一个背景图像，让我们的标题显示在这些框的底部，并添加一个渐变，使我们的标题脱颖而出。

这个背景图像是Unsplash的免费图像，但是可以随意使用您想要的图像。我也将Flexbox融入到我们的盒子底部。你还不会看到，但是当我们放置每个不同的盒子时，你最终会看到它的工作。

将项目放在网格上

网格使得我们想要的尺寸我们的网格项目变得非常容易。但这只是开始

不幸的是，Grid没有办法自动将项目放在我们开始看到的网格布局中。然而，幸运的是，Grid确实为我们提供了手动操作的工具。在本教程中，我们将使用第n个孩子来放置每个列表项。在一个生产网站中，我们建议使用一个类，鉴于正确的规划，可以在内容繁重的站点中自动执行这样的布局。

让我们开始我们的第一个项目。

我们将把我们所有的放置样式放在我们之前写过的媒体查询中，因为我们希望在浏览器为40em或更大之后发生这种布局。随着第n个孩子，我们所定位的第一个列表项。CSS Grid可以让我们轻松地将我们的项目与网格列和网格列放置。有多种不同的方式来指定物品应该在哪里，但是这里我们告诉我们的项目从第一列开始，并将整个容器用-1表示。

然后，使用网格列，我们告诉项目跨越三行。我们如何知道三行将是我们想要的尺寸？那么我们在几分钟之前用grid-auto-rows来指定这些行的大小，如果我们不满意，我们可以改变最小的大小。

我们把剩下的东西放在一起

控制格局布局给我们带来的不是很好吗？只有几行代码，我们可以组合一个完全响应的布局，如果添加了更多的项目，则不会中断。

当然，他们可能看起来有点笨，因为默认情况下它们只占用一个网格列和行，但是它不会破坏我们的布局。如果我们这样做是浮动的，固定的宽度和高度，如果要添加更多的内容，我们将会受到约束。

我们完成布局！这不是很神奇吗？网格允许我们轻松地将我们的项目放在两个维度上

快速抛开旧版浏览器

好的，现在是时候解决房间里的大象了。“老式浏览器呢？” 这个问题的答案与CSS中的任何新功能相同：使用功能查询并拥抱级联。功能查询得到很好的支持，无论我们在哪里，我们都可以将我们的回退放在第一位。例如，我们会按照以下方式写一些东西：

以这种方式编写代码意味着如果浏览器了解“网格布局”，它将使用它而不是Flexbox。另外，由于我们正在接受级联，因此不了解功能查询的浏览器将忽略它们，并且已经拥有所需的信息。我们可能需要规划我们的样式比平常多一点，但是通过这样做，我们可以创造出具有明显后盾的美观布局。

另外，随着时间的推移，CSS Grid只会有越来越多的支持。只要想想后来删除我们的后遗症并留下所有的网格相关的CSS是多么好。当您了解Grid的更多信息时，您将会意识到，现在我们做了很多事情，现在有了更少的CSS行。