DAY 10
0
Modern Web

## 間隔、間隔、間隔

``````.grid-container {
display: grid;

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

column-gap: 10px;
row-gap: 10px;
}
``````

``````.grid-container {
display: grid;

grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 200px);

column-gap: 10px;
row-gap: 10px;

width: 600px;
height: 600px;
}
``````

``````200px x 3 + 10px x 2 = 620px
``````

``````Grid 單元尺寸 = <剩餘空間> * <彈性尺寸> / <彈性尺寸總和（扣除固定尺寸的情況）>

``````

``````.grid-container {
display: grid;

grid-template-columns: minmax(200px, 1fr) 2fr 1fr;

column-gap: 10px;

width: 600px;
}
``````

• `2fr` 最終尺寸 `(600 - 20) * 2 / 3 = 253.33px`
• `1fr` 最終尺寸 `(600 - 20) * 1 / 3 = 126.66px`

``````.grid-container {
display: grid;

grid-template-columns: repeat(auto-fill, 100px);

column-gap: 10px;

width: 600px;
}
``````

• 剩餘空間不足，不出現最後一個間隔
• 剩餘空間足夠，出現最後一個間隔

When a collapsed track’s gutters collapse, they coincide exactly—the two gutters overlap so that their start and end edges coincide. If one side of a collapsed track does not have a gutter (e.g. if it is the first or last track of the implicit grid), then collapsing its gutters results in no gutter on either “side” of the collapsed track.

[css-grid] Collapsed grid tracks and content distribution #1140

`column-gap`, `row-gap` `normal` 或長度單位或比例（`%`），不可為負值 `normal`
`gap` `<'row-gap'> <'column-gap'>?` 上述兩者縮寫，沒有預設值

## 最後的對齊

``````.grid-container {
display: grid;

grid-auto-rows: 100px;

align-items: center;
}

.grid-item:first-child {
height: 200px;
}
``````

• `safe` 倘若對齊元件超過（產生溢位）對齊容器，則該元件會採用 `start` 方式對齊
• `unsafe` 不採取任何動作，使用原有設定做呈現，由渲染端自己決定