iT邦幫忙

grid相關文章
共有 45 則文章
鐵人賽 Modern Web
CSS Flex/Grid Layout Modules 系列 第 15

技術 [CSS] Flex/Grid Layout Modules, part 15

燙傷了手停了幾天,不過差不多 15 天好像就交代完所有的東西了。剩下的大部分是比較冷門,甚至是 Grid Layout Module Level 2 的事情,雖...

鐵人賽 Modern Web DAY 20

技術 Dialog 關閉後更新 Grid 資料 / 顯示儲存的圖檔 - day20

目標 承前篇 當學生資料修改或上傳圖檔後,能夠在 Grid 即時更新修正後的資料,並於點選學生展開顯示該學生相片,如下圖所示。 更新Grid 在 Grid...

鐵人賽 自我挑戰組 DAY 8
大二萌新的學習紀錄 系列 第 8

技術 Day 8 : HTML – 為什麼Flex沒有justify-items和justify-self,而grid卻有?

如標題!這篇就是要來聊聊為什麼Flex沒有,而grid卻有 以下我們都會以討論justify-self為主,因為它和justify-items本質上是一樣的,且...

鐵人賽 自我挑戰組 DAY 7
大二萌新的學習紀錄 系列 第 7

技術 Day 7 : HTML - 上下左右!如何用Flex的屬性去控制grid?

這篇想和大家聊聊,如何用Flex的相關屬性控制CSS grid的排列位置 和Flex能用的屬性大致上一樣,但多了justify-self和justify-con...

鐵人賽 自我挑戰組 DAY 6
大二萌新的學習紀錄 系列 第 6

技術 Day 6 : HTML - 網頁排版超強神器part_2,CSS grid到底是什麼?

上篇介紹了CSS Flex,這篇想來聊聊CSS grid到底是什麼東西 這裡想先給大家一個觀念: Flex和grid它們並不是死對頭,它們是「好戰友」 它們的出...

鐵人賽 Modern Web DAY 14
CSS Flex/Grid Layout Modules 系列 第 14

技術 [CSS] Flex/Grid Layout Modules, part 14

中秋連假寫稿好像有點不太應景,所以今天不會講太多東西,最後把 Grid 單元的對齊稍微補一下,連假嘛,大家輕鬆一點。 不過武漢肺炎肆虐,大家還是小心為上。 單...

鐵人賽 Modern Web DAY 13
CSS Flex/Grid Layout Modules 系列 第 13

技術 [CSS] Flex/Grid Layout Modules, part 13

單元對齊跟留白的部分今天會繼續,定位的問題基本上不出亂子的話就如同昨天說明的。當然,如果再加上對齊跟留白,如果不小心也是會爆炸的。 對於留白問題,我一律設定為...

鐵人賽 Modern Web DAY 12
CSS Flex/Grid Layout Modules 系列 第 12

技術 [CSS] Flex/Grid Layout Modules, part 12

今天繼續來講 Grid 單元,昨天提到了對齊基本用法,今天繼續來講對齊與留白。不過一開始,還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說...

鐵人賽 Modern Web DAY 11
CSS Flex/Grid Layout Modules 系列 第 11

技術 [CSS] Flex/Grid Layout Modules, part 11

現在終於可以開始講 Grid 單元的事情了,雖然可以講的事情可能不多,絕大部分會圍繞在造成容器影響的地方,當然基本的東西還是會先帶一下。 只是說講完之後到底能不...

鐵人賽 Modern Web DAY 10
CSS Flex/Grid Layout Modules 系列 第 10

技術 [CSS] Flex/Grid Layout Modules, part 10

來到了 30 天的三分之一,然後我才剛講完網格容器而已,但是,剩下的東西也不多了,好像要寫滿 30 篇難度有點高。 只好多寫一點廢話了。 間隔、間隔、間隔...

鐵人賽 Modern Web DAY 9
CSS Flex/Grid Layout Modules 系列 第 9

技術 [CSS] Flex/Grid Layout Modules, part 9

你以為網格格線告一個段落後,我會開始講網格單元嗎?當然不是啊,我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。 放心雷沒有很多。 容器中的隱性軌...

鐵人賽 Modern Web DAY 8
CSS Flex/Grid Layout Modules 系列 第 8

技術 [CSS] Flex/Grid Layout Modules, part 8

我先問一個問題,如果我有一個 3x3 的 Excel 方塊,請問我有幾條格線? Grid 容器中的格線是整個排版定位中的靈魂,但,他沒有 Excel 那麼單...

鐵人賽 Modern Web DAY 7
CSS Flex/Grid Layout Modules 系列 第 7

技術 [CSS] Flex/Grid Layout Modules, part 7

我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意,但,就老話一句,誰在意誰痛苦。 踩到雷而且你還不知道為什...

鐵人賽 Modern Web DAY 6
CSS Flex/Grid Layout Modules 系列 第 6

技術 [CSS] Flex/Grid Layout Modules, part 6

你如果會用 Excel,那 Grid 就應該不陌生。 不過老實講,我也不太會用 Excel。 Grid Layout Module 其實他已經 CR 好一...

技術 格線系統(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...