CSS网格-从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;
}

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

当我减小视口宽度以使三列均低于250px时，我希望网格布局可以捕捉到三行一列的布局：

当您减小视口宽度时，由于选择了自动放置算法，当前存在一种临时布局，其中第三项将自身包裹在一行上。

我想绕过这种包装，只支持最初的单行三列布局和最后的三行单列布局。仅使用CSS Grid并且不使用媒体查询，这是否可能？

Answer 1

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

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

结果

.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

上的相同代码

Answer 2

您可以使用Mediaquerie，并在达到最小宽度后将容器变成网格：（由于您提供的信息很少，因此采用了代码选项）

想法的基本示例

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>

您可以在全页模式下播放代码段，并调整浏览器的大小以查看行为。