使用CSS 網(wǎng)格佈局（或其他CSS）建立砌體網(wǎng)格

該問題詢問一種實(shí)現(xiàn)砌體的方法CSS 中的網(wǎng)格效果具有不同高度的元素，其中每個(gè)元素的寬度相同，但底部元素始終比頂部元素低50px。用戶嘗試使用浮動(dòng)和 Flexbox，但遇到了問題。

使用 CSS 網(wǎng)格佈局

解決方案是使用 CSS 網(wǎng)格佈局，它提供了強(qiáng)大且易於使用的功能。建立網(wǎng)格的靈活方式。下面的CSS 程式碼示範(fàn)如何達(dá)到想要的效果：

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>

透過此程式碼，您可以實(shí)現(xiàn)砌體具有不同高度元素的網(wǎng)格效果，以一致且響應(yīng)式的方式排列。

以上是如何使用 CSS 網(wǎng)格佈局來建立砌體網(wǎng)格，其中每個(gè)元素具有相同的寬度，但底部元素始終低於頂部元素 50px？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！