ITHome

[12th 鐵人賽] Grid 格線系統 Part 4, Day 14

6 min read CSSGrid LayoutGrid SystemITHome鐵人賽2020
對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬性預設使用姿勢justify-items, align-itemsnoemal容器區塊內的對齊、填滿相關設定。place-items-上述兩個屬性的集合寫法 align-items / justify-itemsjustify-content, align-contentnormal容器內兩個軸向對齊、填滿相關設定。 place-content-上述兩個屬性的集合寫法 align-content / justify-contentalign-self, justify-

[12th 鐵人賽] Grid 格線系統 Part 3, Day 13

8 min read Grid LayoutGrid SystemCSSITHome鐵人賽2020Media Query
間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1rem; } 這邊能夠接受的數值除了 fr 不能用以外，其他數字你要怎麼寫都可以。你也可以把間隔設定的比元件尺寸還要大，但是應該不會有人做這種事情吧。

[12th 鐵人賽] Grid 格線系統 Part 1, Day 11

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

[12th 鐵人賽] Flexbox 的使用姿勢 Part 4, Day 10

4 min read CSSITHome鐵人賽2020Media QueryGrid LayoutGrid SystemFlexbox
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 * justify-content 水平方向的對齊控制。 * align-items 垂直方向的對齊控制，需要有 height 設定才看得出效果。 * getBoundingClientRect() 拿到子元件的 所有座標點都不是你想的那個樣子。 * 元件的 margin 會算入自身尺寸， 不會出現 像是一般區塊元件 margin 會互相交疊的情況。 * 無論哪個方向所產生的間距（gap）都是瀏覽器運算結果，無法人為控制。 * 子元件若為區塊元件（Block Box），當中若有大於子元件的內容，會干擾子元件尺寸。 * 子元件若為