admin 發表於 2022-7-3 02:31:34

CSS Grid

CSS Grid is a powerful tool that allows for two-dimensional layouts for columns and rows to be created on the web.

admin 發表於 2022-7-3 02:35:08

Grid container property

display: grid;或
display: in-line grid;setting the container to a display property of grid or in-line grid.

admin 發表於 2022-7-3 02:44:47

Grid-template-column property

grid-template-column: 100px auto 100px;有三個 columns, 左右兩個的寬度是 100px, 中間的 column 寬度設為 auto.

admin 發表於 2022-7-3 02:47:11

Grid-template-row property

grid-template-row: 50px 50px;有兩個 rows, 高度都是 50px.

admin 發表於 2022-7-3 02:48:41

瑞德網頁設計：
https://redd.com.tw

admin 發表於 2022-7-3 02:52:13

上述的 row 和 column 可合併一起設定：grid-template: 50px 50px / 100px auto 100px;row 在前，column 在後。

admin 發表於 2022-7-3 02:57:09

Column-gap property

column-gap: 20px;column gap

admin 發表於 2022-7-3 02:58:31

Row-gap property

row-gap: 50px;row gap

admin 發表於 2022-7-3 02:59:54

gap: 20px;同時設定 row & column 的 gap.

admin 發表於 2022-7-3 03:06:26

Justify-content property

justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;水平對齊方式。

admin 發表於 2022-7-3 03:14:19

Align-content property

align-content: start;
align-content: end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;垂直對齊方式。
頁: [1]
查看完整版本: CSS Grid