如何使用CSS Grid或Flex布局实现高度和行数自适应的网页布局？

使用CSS Grid或Flex布局可以实现高度和行数自适应的网页布局。以下是两种方法的详细说明：

1. 使用CSS Grid布局

CSS Grid布局非常适合创建复杂的网格结构，并且可以轻松实现高度和行数的自适应。

示例代码：

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

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

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

解释：

• grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));：这个规则会根据容器的宽度自动调整列数。每列的最小宽度为200px，最大宽度为1fr（即剩余空间）。
• grid-auto-rows: minmax(100px, auto);：这个规则定义了每行的最小高度为100px，最大高度为自动调整。
• gap: 10px;：定义了网格项之间的间距。

2. 使用Flex布局

Flex布局适合创建一维布局（行或列），但通过一些技巧也可以实现高度和行数的自适应。

示例代码：

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

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

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

解释：

• flex-wrap: wrap;：允许Flex项在容器宽度不足时换行。
• flex: 1 1 200px;：这个规则定义了Flex项的弹性属性。1 1 200px表示每个项可以伸缩，最小宽度为200px。
• gap: 10px;：定义了Flex项之间的间距。
• min-height: 100px;：定义了每个Flex项的最小高度。

总结

• CSS Grid：适合创建复杂的网格布局，能够轻松实现高度和行数的自适应。
• Flex布局：适合创建一维布局，通过flex-wrap和flex属性可以实现简单的自适应布局。

根据你的具体需求选择合适的布局方式。如果需要更复杂的布局，CSS Grid通常是更好的选择。