css grid 自动高度_现代CSS网格解决常见布局问题的方法

CSS Grid 是一种新的布局方式，可以解决一些常见的布局问题，其中之一就是自动高度。在 CSS Grid 中，可以使用 grid-auto-rows 属性来设置自动高度。

例如，如果你想要一个具有 3 列和自动行高的网格布局，可以这样设置：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
}

这样，当你添加内容到每个单元格中时，网格会自动增加高度以适应内容。如果你想要固定行高，可以将 grid-auto-rows 属性设置为一个具体的像素值。

除了使用 grid-auto-rows 属性来解决自动高度问题，还可以使用 grid-template-rows 属性来手动设置行高。例如，如果你想要第一行高度为 100 像素，第二行和第三行为自动高度，可以这样设置：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px auto auto;
}

这样，第一行的高度将固定为 100 像素，而第二行和第三行将自动增加高度以适应内容。

总之，CSS Grid 是一个非常强大的布局工具，可以轻松解决许多常见的布局问题，包括自动高度。