如何用CSS Grid或Flex布局实现自适应行高和行数的div容器？

要实现一个自适应行高和行数的 div 容器，可以使用 CSS Grid 或 Flexbox 布局。以下是两种方法的实现方式：

1. 使用 CSS Grid 布局

CSS Grid 提供了强大的网格布局功能，可以轻松实现自适应行高和行数。

<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自适应列宽 */
  grid-auto-rows: minmax(100px, auto); /* 自适应行高 */
  gap: 10px; /* 设置间距 */
}

.item {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  padding: 10px;
}

解释：

• grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))：自动填充列，每列的最小宽度为 150px，最大宽度为 1fr（即剩余空间）。
• grid-auto-rows: minmax(100px, auto)：每行的最小高度为 100px，最大高度根据内容自适应。
• gap: 10px：设置网格项之间的间距。

2. 使用 Flexbox 布局

Flexbox 也可以实现类似的效果，但需要一些额外的处理来确保自适应行高和行数。

<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 设置间距 */
}

.item {
  flex: 1 1 150px; /* 自适应宽度，最小宽度为150px */
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px; /* 最小高度 */
}

解释：

• flex-wrap: wrap：允许子项换行。
• flex: 1 1 150px：子项的自适应宽度，最小宽度为 150px。
• min-height: 100px：设置子项的最小高度。

3. 结合媒体查询

为了在不同屏幕尺寸下更好地控制布局，可以结合媒体查询来调整列数和行高。

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .item {
    min-height: 80px;
  }
}

总结

• CSS Grid 更适合复杂的网格布局，尤其是需要精确控制行高和列宽的场景。
• Flexbox 更适合一维布局，尤其是需要灵活调整子项大小和顺序的场景。

根据你的具体需求选择合适的布局方式。