首頁 > web前端 > css教學 > 如何使用 CSS 網格佈局來建立砌體網格,其中每個元素具有相同的寬度,但底部元素始終低於頂部元素 50px?

如何使用 CSS 網格佈局來建立砌體網格,其中每個元素具有相同的寬度,但底部元素始終低於頂部元素 50px?

Linda Hamilton
發布: 2024-11-17 11:35:02
原創
389 人瀏覽過

How can I create a masonry grid with CSS Grid Layout where each element has the same width but the bottom element is always 50px below the top element?

使用CSS 網格佈局(或其他CSS)建立砌體網格

該問題詢問一種實現砌體的方法CSS 中的網格效果具有不同高度的元素,其中每個元素的寬度相同,但底部元素始終比頂部元素低50px。用戶嘗試使用浮動和 Flexbox,但遇到了問題。

使用 CSS 網格佈局

解決方案是使用 CSS 網格佈局,它提供了強大且易於使用的功能。建立網格的靈活方式。下面的CSS 程式碼示範如何達到想要的效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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 程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板