如何用简单的CSS制作响应式HTML网页
#故事前端开发在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。
最赞的一点就是：这个响应式效果只需要添加一行CSS。
这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。
现在让我们开始吧！
设置
对
于本文，我们将继续使用我们在第一篇CSS Grid文章中使用的网格。然后我们将在文章的最后添加图片。以下是我们的初始网格的外观：
这是HTML：
<DIV类= “容器”>
<DIV> 1 </ DIV>
<DIV> 2 </ DIV>
<DIV> 3 </ DIV>
<DIV> 4 </ DIV>
<DIV> 5 </ DIV>
<DIV > 6 </ div>
</ div>
然后是CSS：
.container {
display：grid;
grid-template-columns：100px 100px 100px;
grid-template-rows：50px 50px;
}
注意：这个例子还有一些基本的样式，我不会在这里介绍，因为它和CSS Grid没有任何关系。如果这段代码让你感到困惑，我建议你阅读我5分钟学习CSS网格的文章，在这里我将介绍布局模块的基础知识。
让我们开始让列响应。
基本的响应式与分数单位
CSS网格带来了一个全新的值---分数单位。分数单位是fr，它允许你将容器分成尽可能多的分数。
让我们将每个列更改为一个分数单位的宽度。
.container {
display：grid;
grid-template-columns：1fr 1fr 1fr;
grid-template-rows：50px 50px;
}
这里发生的事情是网格将整个宽度分成三部分，每一列都占用一个单位。结果如下：
如果我们将该grid-template-columns值更改为1fr 2fr 1fr，则第二列现在将是另外两列的两倍。现在的总宽度是四个分数单位，第二个占了两个，而其他的占了一个。这将是效果图：
换句话说，分数单位值使您可以非常容易地改变列的宽度。
先进的响应能力
然而，上面的例子并没有给我们想要的响应，因为这个网格总是三列宽。我们希望我们的网格使用容器的宽度来改变列的数量。要做到这一点，你必须学习三个新的概念。
重复（）
我们将从这个repeat()函数开始。这是指定列和行的更强大的方法。让我们把我们原来的网格，并改变使用repeat（）：
.container {
display：grid;
grid-template-columns：repeat（3，100px）;
grid-template-rows：repeat（2，50px）;
}
换句话说，repeat(3, 100px)是相同的100px 100px 100px。第一个参数指定了你想要的列数或行数，第二个参数指定了它们的宽度，所以这将给我们提供和我们刚开始一样的布局。
自动调整
然后是自动适应。让我们跳过固定数量的列，而是用3替换auto-fit。
.container {
display：grid;
grid-gap：5px;
grid-template-columns：repeat（auto-fit，100px）;
grid-template-rows：repeat（2，100px）;
}
这会导致以下行为：
网格现在使用容器的宽度来改变列的数量。
它只是试图尽可能多地将100px宽的列安装到容器中。但是，如果我们将所有列的硬编码精确到100像素，我们将永远不会获得我们想要的灵活性，因为它们很少会添加到整个宽度。正如你在上面的gif中看到的，网格经常会在右侧留下空白。
MINMAX（）
为了解决这个问题，我们需要最终的成分minmax()。我们将简单地替换100pxminmax(100px, 1fr)。这是最终的CSS。
.container {
display：grid;
grid-gap：5px;
grid-template-columns：repeat（auto-fit，minmax（100px，1fr））;
grid-template-rows：repeat（2，100px）;
}
注意，所有的响应都发生在一行CSS中。这会导致以下行为：
正如你所看到的，完美的作品。该minmax()函数定义了大于或等于min且小于或等于max的大小范围。
所以列现在总是至少100px。但是，如果有更多的可用空间，网格将简单地分配给每个列，因为列变成一个分数单位，而不是100像素。
添加图像
现在最后一步是添加图像。这与CSS Grid没有任何关系，但是我们还是要看代码。
我们将在每个网格项目内添加一个图片标签。
<div> <img src =“img / forest.jpg”/> </ div>
为了使图像适合项目，我们将它设置为与项目本身一样宽和高，然后使用object-fit: cover;。这将使图像覆盖整个容器，如果需要的话，浏览器将裁剪它。
.container> div> img {
width：100％;
height：100％
object-fit：cover;
}
结果如下：
高清版全景原图
而就是这样！您现在知道了CSS Grid中最复杂的概念之一，所以请给自己一个机会。
浏览器支持
在我们结束之前，我还需要提及浏览器支持。在写这篇文章的时候，全球77％的网站流量支持CSS Grid，而且正在攀升。
我相信将是CSS Grid的一年。它将获得突破，并将成为前端开发人员的必备技能。就像过去几年CSS Flexbox发生的一样。
