CSS 网格 - 从 1 行 3 列过渡到 3 行 1 列

Question

我正在探索 CSS 网格，看看它是否可以完全替代我的特定用例对响应式 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 网格而不使用媒体查询？

Answer 1

自动调整或自动填充功能使用最大列数填充可用的 space。

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

结果

.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>

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

CSS 网格 - 从 1 行 3 列过渡到 3 行 1 列

CSS Grid - Transitioning from 1 row, 3 col to 3 row, 1 col

css

grid-layout

css-grid

结果