如何在 CSS 中创建具有不同高度的砖石网格布局？

具有 Flexbox 或其他布局的 CSS 砖石网格

在 CSS 中创建元素具有不同高度的网格布局可能具有挑战性。虽然 Flexbox 提供了灵活性，但它可能无法满足新元素与前一个元素底部对齐的要求。

引入 CSS 网格布局

而不是 Flexbox，请考虑利用 CSS 网格布局来实现此目的。它提供了一种更强大、更直观的方式来实现砌体网格：

HTML结构：

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

CSS：

grid-container {
  display: grid;                                 
  grid-auto-rows: 50px;                         
  grid-gap: 10px;                               
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));  
}

[short] {
  grid-row: span 1;                                
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

说明：

1. display: grid: 将容器初始化为网格布局。
2. grid-auto-rows: 50px: 将每个网格行的高度设置为 50 像素。
3. grid-gap: 10px: 指定网格之间的间距items.
4. grid-template-columns: 定义网格中有多少列（自动填充）以及每列的最小宽度（min-content: 30%, 1fr） .
5. grid-row: span X: 表示该项目应占据 X 个网格行。

以上是如何在 CSS 中创建具有不同高度的砖石网格布局？的详细内容。更多信息请关注PHP中文网其他相关文章！