响应式布局的一行css代码

CSS代码：.container{显示：网格；网格模板列：100px100px100px；grid-template-rows:50px50px;}注意：示例中有一些基本的样式，但我没有写在这里，因为这对CSS网格布局没有影响。如果这段代码让你感到困惑，我建议你阅读我的文章《5分钟学习CSS网格》一文详细解释了布局的基础知识。让我们使列自适应。BasicResponsiveUnit:fractionCSS网格布局带来了一个全新的价值：fractionunit，通常缩写为fr，它允许你根据需要将容器拆分成多个块。让我们将每一列更改为分数单位宽：.container{display:grid;网格模板列：1fr1fr1fr；grid-template-rows:50px50px;}结果就是grid布局会把整个宽度分成三个分数，每列占一个分数单位，效果如下：如果我们改变grid-template-columns的值到1fr2fr1fr，第二列的宽度将是其他两列的两倍。现在总宽度是四个分数单位，第二列占两个分数单位，其他列各占一个分数。效果如下：一般情况下，分数单位值将允许您轻松更改列的宽度。高级响应然而，上面的例子并没有给我们想要的响应，因为网格总是三列宽。我们希望网格根据容器的宽度改变列数。为此，您必须学习以下三个概念：repeat()首先我们学习repeat()函数。这是一种指定列和行的强大方法。让我们使用repeat()函数来更改网格：.container{display:grid;网格模板列：重复（3、100px）；grid-template-rows:repeat(2,50px);}在上面的代码中，repeat(3,100px)等于100px100px100px。第一个参数指定行数和列数，第二个参数指定它们的宽度，因此它将为我们提供与开始时完全相同的布局：自动调整然后自动调整。让我们跳过固定数量的列并将3替换为自适应数字：.container{display:grid;网格间隙：5px；网格模板列：重复（自动调整，100px）；grid-template-rows:repeat(2,100px);}效果如下：现在，网格将根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的100px宽的列。但是，如果我们将所有列硬编码为100px，我们将永远无法获得所需的灵活性，因为它们几乎无法填满整个宽度。正如您在上图中所看到的，网格通常在右侧留有空白。minmax()为了解决上面的问题，我们需要minmax()。我们用minmax(100px,1fr)代替100px，代码如下：.container{display:grid;网格间隙：5px；grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-template-rows:repeat(2,100px);}请注意，所有响应都发生在一行css代码中。它看起来是这样的：如您所见，它工作得很好。minmax()函数定义一个大于或等于min且小于或等于max的范围。所以现在每列至少为100px。但是如果有更多可用空间，网格布局将简单地在每一列之间平均分配它，因为列变成分数单位而不是100px。添加图片最后一步是添加图片。这与CSSGrid布局无关，但让我们看一下代码。我们为每个网格添加一个图像标签：为了使图像适合每个条目，我们设置它的宽度和高度以匹配条目本身，我们使用object-fit:cover。这将使图像覆盖其整个容器，并且浏览器将根据需要裁剪它。.container>div>img{宽度：100%；高度：100%；object-fit:cover;}效果如下：ok！既然您了解了CSS网格布局中最复杂的概念之一，请给自己竖起大拇指。浏览器兼容性在结束本文之前，我想提一下浏览器的支持情况。在写这篇文章的时候，全球77%的网站都会支持CSSGrid，而且这个比例还在逐渐增加。我认为2018年将是CSS网格布局的一年。它将有所突破，成为前端开发者的必备技能，就像前几年CSSFlexbox布局所发生的一样。