该问题询问一种实现砌体的方法CSS 中的网格效果具有不同高度的元素，其中每个元素的宽度相同，但底部元素始终比顶部元素低 50px。用户尝试使用浮动和 Flexbox，但遇到了问题。
解决方案是使用 CSS 网格布局，它提供了强大且易于使用的功能。创建网格的灵活方式。下面的 CSS 代码演示了如何达到想要的效果：
grid-container {
display: grid; /* Enables the grid layout */
grid-auto-rows: 50px; /* Defines the height of each row to 50px */
grid-gap: 10px; /* Sets the gap between the grid items */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Defines the columns to have a minimum width of 30% */
}
[short] {
grid-row: span 1; /* Makes the element span only one row */
background-color: green;
}
[tall] {
grid-row: span 2; /* Makes the element span two rows */
background-color: crimson;
}
[taller] {
grid-row: span 3; /* Makes the element span three rows */
background-color: blue;
}
[tallest] {
grid-row: span 4; /* Makes the element span four rows */
background-color: gray;
}使用此布局的 HTML 代码如下：
<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>
通过此代码，您可以实现砌体具有不同高度元素的网格效果，以一致且响应式的方式排列。
以上是如何使用 CSS 网格布局创建砌体网格，其中每个元素具有相同的宽度，但底部元素始终低于顶部元素 50px？的详细内容。更多信息请关注PHP中文网其他相关文章！
