在 2 列布局中采用 2 列，但在不带 @media 的 CSS 网格中采用 1 列布局时则不采用

Question

宽屏幕所需的布局：

\n

\n

窄屏幕所需的布局：

\n

\n

初始CSS：

\n

.Layout {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  grid-gap: 24px 40px;\n}\n

\n

如果我设置grid-column-start: span 2第三个元素，布局将被简单地破坏（它发生在CSS 网格中，忽略第二列问题中 minmax() 中指定的最小宽度）。

\n

请不要使用媒体查询，因为它会使 CSS 网格中已宣布的基于自由空间的响应能力失效。

\n

\n

网格有两个极其强大的功能来处理\n可用空间的变化。

\n

<...>

\n

依赖于媒体查询的布局与视口相关联，系统内的\nisn\xe2\x80\x99t 模块化\xe2\x80\x94 组件需要能够适应\n它们可用的空间。

\n

\n了解 CSS 网格布局

\n

\n

如果你确定是这样并且精通 CSS 网格，请明确地说：“这是不可能的” 。

\n

Answer 1

使用grid-column: 1/-1;

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>

如果您希望始终最多有 2 列，您可以像下面这样进行编辑：

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(240px,40vw), 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>