CSS Grid布局如何实现自适应行高和行数？

在CSS Grid布局中，实现自适应行高和行数可以通过以下几种方式来实现：

1. 使用 auto 和 minmax() 函数

你可以使用 auto 和 minmax() 函数来定义行高，使得行高能够根据内容自适应调整。

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(100px, auto));
}

• auto-fill：自动填充行，直到容器没有足够的空间。
• minmax(100px, auto)：每行的最小高度为100px，最大高度为 auto，即根据内容自适应。

2. 使用 fr 单位

fr 单位可以用来分配剩余空间，使得行高能够根据可用空间自适应调整。

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr; /* 三行，每行高度相等 */
}

如果你希望行数自适应，可以结合 auto-fill 或 auto-fit 使用：

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

3. 使用 auto 行高

如果你希望每行的高度完全根据内容自适应，可以直接使用 auto：

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto; /* 每行高度根据内容自适应 */
}

4. 使用 grid-auto-rows 属性

grid-auto-rows 属性可以设置所有行的默认高度，使得行高能够自适应。

.grid-container {
  display: grid;
  grid-auto-rows: minmax(100px, auto); /* 所有行最小高度100px，最大高度自适应 */
}

5. 结合 min-content 和 max-content

你可以使用 min-content 和 max-content 来定义行高，使得行高根据内容的最小或最大高度自适应。

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(min-content, max-content));
}

6. 使用 auto-fit 和 auto-fill 控制行数

auto-fit 和 auto-fill 可以用来控制行数的自适应。

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

• auto-fit：尽可能多地填充行，即使没有足够的项目也会创建行。
• auto-fill：尽可能多地填充行，但不会创建空行。

7. 使用 grid-template-areas 和 grid-auto-flow

如果你有复杂的布局需求，可以使用 grid-template-areas 和 grid-auto-flow 来控制行高和行数的自适应。

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-auto-rows: minmax(100px, auto);
}

总结

通过结合 auto、minmax()、fr、auto-fill、auto-fit 等CSS Grid属性，你可以轻松实现自适应行高和行数的布局。根据具体的需求，选择合适的组合来实现你的布局目标。