具有自动调整但大小不同的css网格模板列[关闭]

Question

我正在尝试如下所示的网格。问题是我不知道如何将响应性和自动生成的列与应该具有不同宽度的项目结合起来。

我知道我可以创建一个响应式网格

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))

或具有不同大小的隐式网格，例如

grid-template-columns: minmax(300px, 1.5fr)) minmax(300px, 1fr)) minmax(300px, 1fr)) minmax(300px, 1.5fr))

但这不会在较小的屏幕上自动换行。

如何将这些结合起来？我可以在单个项目上使用grid-column 属性来实现此目的吗？

或者这是一种错误的方法，在这种情况下使用弹性系统会更好？

Answer 1

您不能使用不同大小的单元格，也不能使用auto-fit 或auto-fill 来定义它们在调整大小时的行为。

但是，要准确获得图表显示的内容，您可以将前两个和后两个 divs 括在它们自己的 div 中，因为它们的大小相同，并在外部使用 auto-fill divs:

.container {
  padding: 5px;
  border: 3px solid green;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 5px;
}

.cell {
  display: flex;
  justify-items: stretch;
  gap: 5px;
}

.cell div {
  border: 3px solid black;
}

.large {
  flex-grow: 3;
}

.small {
  flex-grow: 2;
}

<div class="container">
  <div class="cell">
    <div class="large">One</div>
    <div class="small">Two</div>
  </div>
  <div class="cell">
    <div class="small">Three</div>
    <div class="large">Four</div>
  </div>
</div>

同样，这将前两个单元格和最后两个单元格分别包装在各自的divs 中，这会在网格中创建两个等效的单元格。然后，您可以在这些外部 divs 上使用自动填充。

您可以将两个网格单元格中的每一个都设为弹性显示，以格式化两个内部divs。使用 flex-grow 将内部 divs 分别按 3:2 和 2:3 的比例调整大小。

这不是一个非常灵活的解决方案，因为外部divs 仍然必须以可重复的模式调整大小。但在你的情况下，它们是，所以它解决了这个特定的问题——假设你可以改变你的 HTML。