Media Query

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

概述 我們再重新複習一下， > Grid for layout, Flex for component. 格線系統的發展從 2011 年開始，一直到 2016 年開始進入 CR 的階段。以目前的版本來看，市面上瀏覽器的 支援程度 [https://caniuse.com/?search=grid] 看起來是相當樂觀的。 所以，到底 Grid 帶來了什麼東西？ * CSS Grid Layout Module

你所不知道的「補白」 首先，你必須要知道這幾個常用屬性的可用值， 屬性預設值可用值justify-contentnormalflex-start,flex-end,center,space-between, space-aroundalign-contentnormalflex-start,flex-end,center,space-between, space-aroundalign-itemsstretchflex-start,flex-end,center,baseline,stretch align-selfautoauto,flex-start,flex-end,center,baseline,stretch好了，請留意兩個屬性的預設值，align-content 與 align-items 預設都是使用 stretch 。換句話說，當你什麼事情都沒有做的時候，他會幫你自動 填滿