CSS 响应式网格从 4 列变为 2 列

Question

这是一个很好地居中的网格，但我希望移动设备的 4 列减少到 2 列。我应该添加什么？

body {
  display: grid;
  align-items: center;
  justify-items: center;
  background: grey;
  max-width: 56em;
}

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3em;
  margin: 0 auto;
  max-width: 64em;
}

li {
  display: grid;
  align-items: center;
  justify-content: center;
  list-style: none;

}

Answer 1

当屏幕较窄时，您必须添加CSS更改。使用：

@media screen and (max-width: ???px){}

在该块中，您可以像普通 css 一样添加规则，当屏幕宽度小于给定值时，这些规则应该发生变化。我想你处理这个问题就足够了。如果您需要更多信息（例如新值），请写评论，我会尽力回答。

示例

Answer 2

我想出了一个仅使用内联样式的替代解决方案。我必须使用的新平台会剥离我的样式标签，从而剥离我的 @media 查询，但对内联样式没有限制，因此这适用于处于类似情况的任何人。

技巧是在包装网格内使用 2 个元素的嵌套网格。对于此示例，假设您希望列的最小宽度为 150 像素。使用

设置嵌套网格的样式

grid-template-columns: repeat(auto-fit,minmax(150px,1fr));

和包装纸

grid-template-columns: repeat(auto-fit,minmax(min(100vw,300px),1fr));

发生的情况是，当大小缩小超过 600 像素时，包装器从 2x 300 像素列下降到 1 599 像素列，每个列包含 2 列的嵌套网格。因此 4 列变为 2 列。

包装器上的 min(100vw,300px) 部分是为了如果屏幕小于 2x 最小列大小，则允许 2 列缩小为 1 列。

一个完整的例子是

<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100vw,300px),1fr));">
    <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));">
        <div>content</div>
        <div>content</div>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));">
        <div>content</div>
        <div>content</div>
    </div>
</div>