CSS Grid

admin

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

admin

Grid container property

1. display: grid;

複製代碼

或

1. display: in-line grid;

複製代碼

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

admin

Grid-template-column property

1. grid-template-column: 100px auto 100px;

複製代碼

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

admin

Grid-template-row property

1. grid-template-row: 50px 50px;

複製代碼

有兩個 rows, 高度都是 50px.

admin

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

admin

上述的 row 和 column 可合併一起設定：

1. grid-template: 50px 50px / 100px auto 100px;

複製代碼

row 在前，column 在後。

admin

Column-gap property

1. column-gap: 20px;

複製代碼

column gap

admin

Row-gap property

1. row-gap: 50px;

複製代碼

row gap

admin

1. gap: 20px;

複製代碼

同時設定 row & column 的 gap.

admin

Justify-content property

1. justify-content: start;
   
2. justify-content: end;
   
3. justify-content: center;
   
4. justify-content: space-around;
   
5. justify-content: space-between;
   
6. justify-content: space-evenly;

複製代碼

水平對齊方式。

admin

Align-content property

1. align-content: start;
   
2. align-content: end;
   
3. align-content: center;
   
4. align-content: space-around;
   
5. align-content: space-between;
   
6. align-content: space-evenly;

複製代碼

垂直對齊方式。