iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 1911 瀏覽

鐵人賽 Modern Web DAY 25

重新認識 Flex 和 Grid 系列第 25 篇

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

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

placeholder name ‧ 2020-10-10

2 Like 0 留言 2445 瀏覽

鐵人賽 Modern Web DAY 29

重新認識 Flex 和 Grid 系列第 29 篇

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

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

placeholder name ‧ 2020-10-14

1 Like 1 留言 1214 瀏覽

鐵人賽 Modern Web DAY 28

重新認識 Flex 和 Grid 系列第 28 篇

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

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

placeholder name ‧ 2020-10-13

1 Like 0 留言 1958 瀏覽

鐵人賽 Modern Web DAY 27

重新認識 Flex 和 Grid 系列第 27 篇

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

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

placeholder name ‧ 2020-10-12

1 Like 0 留言 6158 瀏覽

鐵人賽 Modern Web DAY 24

重新認識 Flex 和 Grid 系列第 24 篇

技術 [Day24] grid gap相關屬性

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

placeholder name ‧ 2020-10-09

1 Like 0 留言 3092 瀏覽

鐵人賽 Modern Web DAY 22

重新認識 Flex 和 Grid 系列第 22 篇

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

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

placeholder name ‧ 2020-10-07

1 Like 0 留言 3039 瀏覽

鐵人賽 Modern Web DAY 21

重新認識 Flex 和 Grid 系列第 21 篇

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

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

placeholder name ‧ 2020-10-06

1 Like 0 留言 1621 瀏覽

鐵人賽 Modern Web DAY 23

重新認識 Flex 和 Grid 系列第 23 篇

技術 [Day23] grid 縮寫

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

placeholder name ‧ 2020-10-08

1 Like 0 留言 2321 瀏覽

鐵人賽 Modern Web DAY 20

重新認識 Flex 和 Grid 系列第 20 篇

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

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

placeholder name ‧ 2020-10-05

4 Like 0 留言 14513 瀏覽

鐵人賽 Modern Web DAY 19

重新認識 Flex 和 Grid 系列第 19 篇

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

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

placeholder name ‧ 2020-10-04

2 Like 0 留言 2278 瀏覽

鐵人賽 Modern Web DAY 18

重新認識 Flex 和 Grid 系列第 18 篇

技術 [Day18] Grid 網格容器

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

placeholder name ‧ 2020-10-03

2 Like 0 留言 4625 瀏覽

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

placeholder name ‧ 2020-10-02

4 Like 0 留言 7682 瀏覽

鐵人賽 Modern Web DAY 1

重新認識 Flex 和 Grid 系列第 1 篇

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

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

placeholder name ‧ 2020-09-16

0 Like 0 留言 2232 瀏覽

鐵人賽自我挑戰組 DAY 9

WordPress 客製化從 0 開始系列第 9 篇

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

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

Eric 桓桓 ‧ 2020-09-10

2 Like 0 留言 8561 瀏覽

技術 CSS - Grid 介紹與使用

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

Ares ‧ 2020-06-02

1 Like 0 留言 3416 瀏覽

鐵人賽 Modern Web DAY 18

連續30天的超實務網頁設計的垂直置中教學系列第 18 篇

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

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

CSScoke ‧ 2018-11-02

2 Like 0 留言 2592 瀏覽

鐵人賽 Modern Web DAY 17

連續30天的超實務網頁設計的垂直置中教學系列第 17 篇

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

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

CSScoke ‧ 2018-11-01

2 Like 0 留言 5022 瀏覽

鐵人賽 Modern Web DAY 16

連續30天的超實務網頁設計的垂直置中教學系列第 16 篇

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

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

CSScoke ‧ 2018-10-31

1 Like 0 留言 2224 瀏覽

鐵人賽 Modern Web DAY 15

連續30天的超實務網頁設計的垂直置中教學系列第 15 篇

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

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

CSScoke ‧ 2018-10-30

2 Like 0 留言 2284 瀏覽

鐵人賽 Modern Web DAY 14

連續30天的超實務網頁設計的垂直置中教學系列第 14 篇

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

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

CSScoke ‧ 2018-10-29

1 Like 0 留言 5204 瀏覽

鐵人賽 Modern Web DAY 8

三十哩路，我的前端學習路程系列第 8 篇

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

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

只是顆米荳 ‧ 2017-12-11

1 Like 1 留言 3174 瀏覽

鐵人賽 Modern Web DAY 30

CSS 實戰心法系列第 30 篇

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

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

卡斯伯 ‧ 2016-12-30

1 Like 1 留言 4102 瀏覽

鐵人賽自我挑戰組 DAY 9

30 天 CSS 隨手筆記系列第 9 篇

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

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

lazy_shyu ‧ 2016-12-24

1 Like 1 留言 2775 瀏覽

鐵人賽 Modern Web DAY 24

CSS 實戰心法系列第 24 篇

技術實戰心法 - 自幹 Grid System

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

卡斯伯 ‧ 2016-12-24

1 Like 1 留言 4114 瀏覽

鐵人賽自我挑戰組 DAY 7

30 天 CSS 隨手筆記系列第 7 篇

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

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

lazy_shyu ‧ 2016-12-22

1 Like 1 留言 4676 瀏覽

鐵人賽自我挑戰組 DAY 6

30 天 CSS 隨手筆記系列第 6 篇

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

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

lazy_shyu ‧ 2016-12-21

2 Like 0 留言 4017 瀏覽

鐵人賽自我挑戰組 DAY 5

30 天 CSS 隨手筆記系列第 5 篇

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

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

lazy_shyu ‧ 2016-12-20