通过重复（自动调整）自动调整网格列大小，同时让网格单元跨越 2 列或更多列

Question

我想使用 CSS 网格创建响应式布局，其中网格子元素的大小可变。为了使网格响应，我想我应该使用

grid-template-columns: repeat(auto-fit, minmax(min-size, 1fr));

但是，如果我将其与

grid-column: span 2;

结合起来，网格永远不会折叠成一列，而是按照上面的行规定保留至少两列。

这是我当前代码的模型：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.grid-item {
  padding: 0.2rem;
  border: 0.1rem solid black;
}

.grid-item.tall {
  padding: unset;
  border: unset;
}

.grid-item.wide {
  grid-column: span 2;
}

<div class="grid">
  <div class="grid-item">Regular grid child</div>
  <div class="grid-item tall">
    <div class="grid-item">Short grid child</div>
    <div class="grid-item">Short grid child</div>
  </div>
  <div class="grid-item wide">Wide grid child</div>
 </div>

当视口小于 1000 像素时，不会调整列的大小，而是将右侧的列压扁/推出视口。

如何实现具有可变宽度/高度的单元格的响应式网格布局？最终的设计将包含更多的单元格，使得根据媒体查询调整网格大小变得很麻烦，而且我不想使用 Javascript 来做这样的事情。

提前感谢您的指点！

Answer 1

这是你问的吗？

也许可以添加一张屏幕截图，其中包含当前屏幕上所需行为的屏幕截图以使其清晰可见

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.grid-item {
  padding: 0.2rem;
  border: 0.1rem solid black;
}

.grid-item.tall {
  padding: unset;
  border: unset;
}

.grid-item.wide {
  grid-column: span 2;
}

/* Media query for screens smaller than 1000px */
@media (max-width: 1000px) {
  .grid {
    grid-template-columns: 1fr; /* This makes the grid have only one column */
  }

  .grid-item.wide {
    grid-column: span 1; /* Override the span for 'wide' items to take only one column */
  }
}

<div class="grid">
  <div class="grid-item">Regular grid child</div>
  <div class="grid-item tall">
    <div class="grid-item">Short grid child</div>
    <div class="grid-item">Short grid child</div>
  </div>
  <div class="grid-item wide">Wide grid child</div>
 </div>