iT邦幫忙

grid相關文章
共有 12 則文章
鐵人賽 Modern Web DAY 18

技術 使用 Grid + margin 來達到垂直置中目的

簡言 繼續用 Grid 來置中,由於 Grid 物件對空間解讀的特殊性,我們只要在父層物件設定 display: grid,接著在需要垂直置中的物件上設定 ma...

鐵人賽 Modern Web DAY 17

技術 使用 Grid + place-content 製作垂直置中區塊

簡言 place-content 這個 CSS Grid 的屬性不知道有多少人用過,此屬性是 align-content 與 justify-content 的...

鐵人賽 Modern Web DAY 16

技術 使用 Grid + place-items 來做垂直置中效果

簡言 place-items 這屬性不知道有多少人用過,我們可利用這個屬性來快速設定 X 跟 Y 軸的對齊,達到垂直置中的效果。 原理說明 place-item...

鐵人賽 Modern Web DAY 15

技術 使用 Grid + align-self 達到垂直置中效果

簡言 align-self 應該大家都不陌生,基本上就是對 grid Y軸的個別對齊方式,只要對單一子層物件設定 align-self: center 就能達成...

鐵人賽 Modern Web DAY 14

技術 使用 Grid + align-content 做垂直置中

簡言 CSS grid 的 align-content 跟 Flex 的 align-content 有點差異,CSS grid 對於空間的解釋會跟 Flex...

鐵人賽 Modern Web DAY 8

技術 Day08::我所知道的 CSS Grid Layout

CSS Grid Layout 又被稱為網格佈局 簡而言之就是將畫面切割成若干方格 再依照想要的位置把方塊放進去! 會使用到的屬性有 display:grid...

鐵人賽 Modern Web DAY 30
CSS 實戰心法 系列 第 30

技術 CSS 鐵人賽的結束與接下來的研究

相較於 Javascript 來說,CSS 的演進速度算是非常緩慢的,主要原因當然是瀏覽器的相容性,瀏覽器不太能因為新的特色加入而毀了以前所建置的網站。 在這個...

鐵人賽 自我挑戰組 DAY 9
30 天 CSS 隨手筆記 系列 第 9

技術 30 天 CSS 隨手筆記 - 第 09 天 - OMG... Grid Layout~!! ( 5/7 - item 屬性 )

在 grid conatiner 上可以畫出表格後,剩下的就是 grid item 的事了。 不多加設定的話,那麼預設是一個 item 佔一個 grid cel...

鐵人賽 Modern Web DAY 24
CSS 實戰心法 系列 第 24

技術 實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid,但透過自幹會了解更細的運作原理,grid system 和其他元件不太一樣,他是屬於外容器型的元件,一層包覆著一層變化性相當高,如...

鐵人賽 自我挑戰組 DAY 7
30 天 CSS 隨手筆記 系列 第 7

技術 30 天 CSS 隨手筆記 - 第 07 天 - OMG... Grid Layout~!! ( 3/7 - container 屬性 1 )

今天筆記了幾個在 grid 上的基礎屬性,分別為: display ( 特定 value ) grid-template-columns grid-templ...

鐵人賽 自我挑戰組 DAY 6
30 天 CSS 隨手筆記 系列 第 6

技術 30 天 CSS 隨手筆記 - 第 06 天 - OMG... Grid Layout~!! ( 2/7 - 概觀 )

本來預計今天要筆記 Grid 相關屬性的,但考慮過後決定延到下一篇。 這篇分為三個部分: ( 舉例 ) grid 大概是什麼樣子呢? 術語介紹 DEMO -...

鐵人賽 自我挑戰組 DAY 5
30 天 CSS 隨手筆記 系列 第 5

技術 30 天 CSS 隨手筆記 - 第 05 天 - OMG... Grid Layout~!! ( 1/7 - 簡介 )

10 月時,我與同事一起參加了 CSS Conf 2016,非常多的講者都在推 Grid 這個東西。 ( 我當時連聽都沒聽過,還覺得那可能是一個新的 css f...