minmax css_CSS网格布局：通过自动填充和minmax（）进行响应

minmax css

在整个系列中，我们已经熟悉Grid语法，了解了一些在页面上布局元素的有效方法，并告别了一些旧习惯。 在本教程中，我们将把所有这些应用到一些实用的响应式Web设计中。

媒体查询

让我们使用上次中断的演示。

它包含两个声明的网格； 我们的主网格和其中一个项目中的嵌套网格。 我们可以使用媒体查询来控制这些网格的生效时间，这意味着我们可以完全重新定义不同视口宽度的布局。

首先复制第一个网格声明，然后将重复的文本包装在移动优先的媒体查询中（我使用500px作为断点，但这完全是任意的）：

.grid-1 {
    /* grid declaration styles */
}


@media only screen and (min-width: 500px) {

    .grid-1 {
        /* grid declaration styles */
    }

}

现在，在第一个声明中，我们将更改网格的定义方式，将整个内容放置在单个列中。 我们将仅在grid-template-columns规则中列出一列，确保现在使用grid-template-rows定义了我们grid-template-rows ，并使用grid-template-are