如何使用具有不同高度元素的 CSS 网格布局创建砖石网格？-css教程-PHP中文网

如何使用具有不同高度元素的 CSS 网格布局创建砖石网格？

DDD

发布： 2024-11-19 05:21:02

原创

177 人浏览过

How can I create a masonry grid using CSS Grid Layout with elements of varying heights?

使用 CSS 网格布局创建砖石网格

在 CSS 中，使用不同高度的元素实现网格效果可能具有挑战性。然而，最近推出的 CSS 网格布局提供了一个强大的解决方案。

使用 CSS 网格布局

要使用 CSS 网格布局创建砖石网格，您可以按照以下步骤操作:

定义网格容器：使用display: grid属性创建网格容器。
设置自动行高： 使用 grid-auto-rows 属性指定网格中每行的默认高度。这可以确保不同行中的元素在垂直方向上具有相等的间距。
调整间距：使用 grid-gap 属性设置网格项目之间的水平和垂直间距。
定义列大小：使用 grid-template-columns 属性指定网格中列的大小。在这里，我们设置自动填充来创建具有灵活列大小的网格，而 minmax(30%, 1fr) 确保列至少有 30% 宽，并且可以根据需要扩展。

实现砌体网格

以下是创建砌体网格的示例 HTML 和 CSS 代码：

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

登录后复制

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;
}

登录后复制

此代码将创建一个砌体网格，其中不同高度的元素自动排列成均匀分布的网格状结构。

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