CSS Grid - 从 1 行 3 列过渡到 3 行 1 列

Question

我正在探索 CSS Grid，看看它是否可以完全取代我的特定用例对响应式 CSS 媒体查询的需求。我有以下网格容器：

.gridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 0px 15px;
    margin: 0 auto;
    grid-row-gap: 20px;
}

网格容器包含三个项目，这些项目最初会在较大的屏幕尺寸上形成一行和三列：

当我减小视口宽度以使三列每列低于 250 像素时，我希望网格布局与三行一列的布局对齐：

当您减小视口宽度时，由于选择了自动放置算法，当前有一个临时布局，其中第三个项目自动换行：

我想绕过这种包装，只支持最初的一行三列布局和最终的三行一列布局。仅使用 CSS Grid 而不使用媒体查询是否可以做到这一点？

Answer 1

一旦达到最小宽度，您就可以使用媒体查询并将容器变成网格：（由于您提供的信息太少，因此采用了代码选项）

这个想法的基本例子

div {
  padding: 1em;
  margin: 1em;
  border: dotted tomato;
}

@media (min-width: 780px) {
  body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 0px 15px;
    margin: 0 auto;
    grid-row-gap: 20px;
  }
}

<div>lorem</div>
<div>lorem</div>
<div>lorem</div>

您可以在全页模式下播放 sn-p 并调整浏览器大小以检查行为。

Answer 2

自动调整或自动填充功能以最大列数填充可用空间。

您可以借助媒体表达式解决问题，以所需的分辨率更改列数。

结果

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  padding: 0px 15px;
  margin: 0 auto;
  grid-row-gap: 20px;
  list-style: none;
}

.item {
  border: 1px dashed red;
}

@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

<ul class="grid">
  <li class="item">
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
  </li>
  <li class="item">
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
  </li>
  <li class="item">
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
  </li>
</ul>

CodePen 上的代码相同