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;
}

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

​

​

当我将视口宽度缩小到三列在250 of以下时，我希望网格布局能够快速调整为三行一列的布局：

​

​

当您缩小视口宽度时，由于所选的自动放置算法，当前有一个临时布局，其中第三个项被包装到它自己所在的行中：

​

​

我想绕过这个包装，只支持最初的一行、三列布局和最后的三行、一列布局。这是可能的CSS网格仅和不使用媒体查询？

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>

​

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

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上相同的代码

​

​