[12th 鐵人賽] Grid 格線系統 Part 3, Day 13
間隔、間隔、間隔
先不囉唆,上圖。
中間看起來比較密集的部分,就是所謂的 間隔,在樣式表當中就是這樣設定,
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 1rem;
}
這邊能夠接受的數值除了 fr
不能用以外,其他數字你要怎麼寫都可以。你也可以把間隔設定的比元件尺寸還要大,但是應該不會有人做這種事情吧。那麼,這個間隔有什麼毛病呢?請你回去看看剛剛那張圖。
> 看到那個精美的內容衝到間隔裡面了嗎?
是的,