iT邦幫忙

grid相關文章
共有 31 則文章

技術 格線系統(2) DAY44

今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...

技術 格線系統(1) DAY43

這裡要先介紹 為什麼要 模組化格線系統?? 因為若因 功能性命名 區塊若命名為某個功能之後 就不會運用在其他區塊 模組化格線 優點 避免命名上的問題 整體性...

鐵人賽 Modern Web DAY 30
重新認識 Flex 和 Grid 系列 第 30

技術 [Day30] grid z-index 分層 / order 順序

終於也進入到尾聲了,最後一章要介紹網格項目的分層與順序。 z-index 分層 .item { z-index: auto | <interger...

鐵人賽 Modern Web DAY 29
重新認識 Flex 和 Grid 系列 第 29

技術 [Day29] grid 項目對齊屬性

如果熟悉 flexbox 的對齊屬性,在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念, justify-* 通常是操控"行"...

鐵人賽 Modern Web DAY 28
重新認識 Flex 和 Grid 系列 第 28

技術 [Day28] grid-row / grid-column + grid-area

如果你已經對上一篇 Day27 的屬性熟悉,這篇很快就會懂,因為只是加以說明上一篇的縮寫方式,一樣都是在控制網格項目的範圍。 grid-row / grid-...

鐵人賽 Modern Web DAY 27
重新認識 Flex 和 Grid 系列 第 27

技術 [Day27] grid-row-start / grid-row-end + grid-column-start / grid-column-end

如果想要控制網格項目的放置位置,就要知道怎麼定義項目放置的"行"與"列"分別是在哪裡。 grid-row-start...

鐵人賽 Modern Web DAY 26
重新認識 Flex 和 Grid 系列 第 26

技術 [Day26] Grid 網格項目

當瞭解完網格容器的屬性後,接下來要進入網格項目的部分,如果你還不了解什麼是網格容器及網格環境,可以回顧地ˊ十七天Grid 基本認識及第十八天Grid 網格容器...

鐵人賽 Modern Web DAY 25
重新認識 Flex 和 Grid 系列 第 25

技術 [Day25] grid 容器對齊屬性

如果熟悉 flexbox 的對齊屬性,在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念, justify-* 通常是操控"行"...

鐵人賽 Modern Web DAY 24
重新認識 Flex 和 Grid 系列 第 24

技術 [Day24] grid gap相關屬性

知道如何操縱網格後,如果希望網格區域之間是可以有間隙( gutter )的,除了對所有網格做 margin 之外,也可以使用 grid 的 gap 相關屬性...

鐵人賽 Modern Web DAY 23
重新認識 Flex 和 Grid 系列 第 23

技術 [Day23] grid 縮寫

grid 縮寫 grid 提供了一個最簡單的縮寫,讓許多屬性可以寫在一起。 .container { grid: none | <grid-tem...

鐵人賽 Modern Web DAY 22
重新認識 Flex 和 Grid 系列 第 22

技術 [Day22] grid-auto 屬性之 rows/columns

如果沒有給予明確指定網格項目位置,網格項目會自動加入網格內,前面已經了解到很多網格線的操控方式,但那些沒有被操控的、自動生成的、預設的網格線段和區域,要怎麼去操...

鐵人賽 Modern Web DAY 21
重新認識 Flex 和 Grid 系列 第 21

技術 [Day21] grid-auto 屬性之 flow

如果沒有給予明確指定網格項目位置,網格項目會自動加入網格內,前面已經了解到很多網格線的操控方式,但那些沒有被操控的、自動生成的、預設的網格線段和區域,要怎麼去操...

鐵人賽 Modern Web DAY 20
重新認識 Flex 和 Grid 系列 第 20

技術 [Day20] grid-template 屬性之 areas

雖然說網格線會隨著網格項目自動生成,但既然要使用網格系統,就要了解怎麼操控網格線,才能劃出各種多變的網格區域,然而畫網格線有很多種做法,且每種做法的語法也不同,...

鐵人賽 Modern Web DAY 19
重新認識 Flex 和 Grid 系列 第 19

技術 [Day19] grid-template 屬性之 rows/columns

雖然說網格線會隨著網格項目自動生成,但既然要使用網格系統,就要了解怎麼操控網格線,才能劃出各種多變的網格區域,然而畫網格線有很多種做法,且每種做法的語法也不同,...

鐵人賽 Modern Web DAY 18
重新認識 Flex 和 Grid 系列 第 18

技術 [Day18] Grid 網格容器

.container { display: grid | inline-grid; } 當我們對 container 宣告 display: grid...

鐵人賽 Modern Web DAY 17
重新認識 Flex 和 Grid 系列 第 17

技術 [Day17] Grid 基本認識

Grid(網格),全名 CSS grid Layout Module Level 1(https://www.w3.org/TR/css-grid-1/) Gr...

鐵人賽 Modern Web DAY 1
重新認識 Flex 和 Grid 系列 第 1

技術 [Day01] 請問你掉的是 Flexbox 還是 Grid ?

開賽阿!! 工程師轉職的路上,靈魂不小心跌入充滿 code 的洪流裡 . . . 切版之神:「請問你掉的是 Flexbox 還是 Grid ?」 我:「喔沒欸....

鐵人賽 自我挑戰組 DAY 9

技術 Day 9 用 WordPress 看 CSS 樣式:版面配置 (grid 與 @media)

昨天我們說明了 flex 以直線為排列單位的配置樣式。今天,我們要再來進一步的探討 grid 這種版面樣式。 display: grid; 事實上,grid 的...

技術 CSS - Grid 介紹與使用

Gird 是一種 CSS 的網格系統,他出來也有一陣子了,直到最近突然想到我還沒認真看過XD,所以想說該來還債拉,這篇就跟大一起來學習一下如何使用 Gird,那...

鐵人賽 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 -...