CSS中未知宽度的单元格数量未知的网格

Question

假设我们有一个响应式网格容器，其中包含不定数量的子单元格。单元格的宽度和高度各不相同。仅使用 CSS（可能是 CSS Grid），我们如何创建这样的网格，列数/行数和每列/行的宽度/高度是根据容器的大小（不会溢出）和单元格的大小动态确定的以下两种方式之一：

1. 每列/行的宽度/高度取决于该列/行中最宽/最高的单元格，
2. 所有列/行的宽度/高度是根据网格中最宽/最高的单元格确定的？

当应用于列宽时，这两种情况松散地分别对应于表格的自动和固定布局算法。除了我们不知道列数和行数；它需要以某种方式自动确定。

以下示例演示了应用于列宽的这两种情况。对于每种情况，有两种可能的流向：行或列。请注意，在示例中，我们必须专门设置列数及其大小。我希望那些自动确定。

请尝试在您的答案中复制这些示例，而不设置确切的列数、行数以及任何宽度或高度。

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  flex-wrap: wrap;
  grid-template-rows: repeat(3, auto);
  justify-content: space-between;
  border: 3px solid teal;
  font-size: 20px;
}
.flex {
  grid-template-columns: repeat(3, auto);
  width: min-content;
}
.fixed {
  grid-template-columns: repeat(3, 33.33%);
  width: 28em;
}
.column {
  grid-auto-flow: column;
}

.cell {
  padding: 1em;
  background: pink;
  border: 1px dashed teal;
  white-space: nowrap;
}

h3:not(:first-of-type) {
  margin-top: 3em;
}

<h3>Flexible column width. Flow in rows</h3>
<div class="container flex row">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

<h3>Flexible column width. Flow in columns</h3>
<div class="container flex column">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

<h3>Fixed column width. Flow in rows</h3>
<div class="container fixed row">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

<h3>Fixed column width. Flow in columns</h3>
<div class="container fixed column">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

Answer 1

我在使用列时遇到了同样的问题，通过将grid-template-columns: repeat(auto-fit, minmax(baseValue,maxValue)); 添加到父元素来解决这个问题