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

最新推荐文章于 2026-06-21 09:45:57 发布

翻译最新推荐文章于 2026-06-21 09:45:57 发布 · 743 阅读

标签

#java #python #css #javascript #html

本文介绍了如何使用CSS Grid的自动填充和minmax()函数实现响应式布局。通过媒体查询调整不同视口宽度下的网格布局，实现砖石型布局和动态列数。详细探讨了自动填充如何根据可用空间创建网格轨道，以及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-areas安排布局：

.grid-1 {
    display: grid;
    width: 100%;
    margin: 0 auto;
    
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto 80px;
    grid-gap: 10px;
    
    grid-template-areas:    "header"
                            "main"
                            "sidebar"
                            "footer";
}

默认情况下，我们也将grid-gap仅10px，以适应较小的屏幕。

这就是给我们的。您会注意到，我们还使用媒体查询来更改.grid-1 div项的padding和font-size 。

我们的嵌套网格

这可以照顾到主布局，但是我们仍然拥有嵌套的网格，该网格在所有情况下都顽固地保留在其两列布局中。为了解决这个问题，我们将做与以前完全相同的操作，但是使用不同的断点来建议采用内容优先的方法：

.item-2 {
    /* grid declaration styles */
}


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

    .item-2 {
        /* grid declaration styles */
    }

}

在CodePen上检查最终结果。

这里需要注意几件事：

如前所述，无论源顺序如何，您都可以直观地排列网格项目，而媒体查询意味着我们可以针对不同的屏幕宽度使用不同的视觉顺序。但是，嵌套必须与源代码保持一致。我们的嵌套网格项必须始终在视觉上和实际上是其父级的后代。
CSS过渡对Grid布局没有任何影响。当我们的媒体查询开始，并且网格区域移动到新位置时，您将无法将它们放到适当的位置。

自动填充和minmax（）

网格的另一种（某种）响应方法非常适合于砖石类型的布局。根据视口自动阻止其大小和流量。

自动填充

到目前为止，我们的方法一直是确定有多少条轨道并观看相应的项目。这就是本演示中正在发生的事情。我们有grid-template-columns: repeat(4, 1fr); 表示“创建四列，并使每一列成为单个小数单位宽度”。

使用auto-fill关键字，我们可以确定轨道的宽度，然后让Grid找出可用空间中可以容纳的轨道数。在本演示中，我们使用了grid-template-columns: repeat(auto-fill, 9em); 表示“将每个列宽9em，并尽可能将其装入网格容器中”。

注意：这也考虑了我们的装订线，即grid-gap 。

这些演示中的容器具有深色背景，以清楚地显示有多少可用空间，并且您会发现在上一个示例中该容器尚未完全填充。那么我们该怎么做呢？

minmax（）

minmax()函数使我们能够为轨道设置最小和最大大小，从而使Grid能够在其中运行。例如，我们可以设置三列，前两列的宽度为1fr，最后一列的最大值为1fr，但缩小幅度不小于160px：

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

当您挤压窗口时，所有列都会收缩，但是最后一列只会被推到现在为止。看一看。

回到我们的auto-fill演示，如果我们将列宽更改为minmax(9em, 1fr)网格将放置尽可能多的9em轨道，然后将它们扩展到最大1fr，直到填充容器：

警告：网格将在重新加载页面时重新计算轨道（尝试挤压浏览器窗口并单击刷新），但在窗口调整大小时不会这样做。媒体查询可用于更改值，但在调整窗口大小时它们仍然不能很好地发挥作用。

结论

让我们结束一些子弹：

有了本系列中的经验教训，您就可以开始使用Grid了！请继续关注更多的Grid教程，实践练习，常见布局问题的解决方案以及更新。

翻译自: https://webdesign.tutsplus.com/tutorials/css-grid-layout-going-responsive--cms-27270

minmax css