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

2 Like 1 留言 18461 瀏覽

鐵人賽自我挑戰組 DAY 6

大二萌新的學習紀錄系列第 6 篇

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

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

ㄙㄩˊ ‧ 2021-09-20 ‧團隊imac_跳過這篇

4 Like 0 留言 14513 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

placeholder name ‧ 2020-10-04

2 Like 0 留言 8561 瀏覽

技術 CSS - Grid 介紹與使用

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

Ares ‧ 2020-06-02

4 Like 0 留言 7682 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

placeholder name ‧ 2020-09-16

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 留言 5368 瀏覽

鐵人賽 Modern Web

CSS Flex/Grid Layout Modules 系列第 15 篇

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

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

閃光洽 ‧ 2022-01-14

1 Like 0 留言 5204 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

只是顆米荳 ‧ 2017-12-11

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 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 留言 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

5 Like 0 留言 4371 瀏覽

鐵人賽 Modern Web

CSS Flex/Grid Layout Modules 系列第 16 篇

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

Media Query 我覺得已經講到快爛掉了，搭配 Grid 說實在話也沒有很不好做的地方。不過，由於 Grid 是「方格系統」，所以你必須要撇開之前使用 F...

閃光洽 ‧ 2022-05-17

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 留言 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

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

0 Like 0 留言 3671 瀏覽

鐵人賽自我挑戰組 DAY 7

大二萌新的學習紀錄系列第 7 篇

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

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

ㄙㄩˊ ‧ 2021-09-21 ‧團隊imac_跳過這篇

1 Like 0 留言 3416 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

CSScoke ‧ 2018-11-02

1 Like 0 留言 3240 瀏覽

鐵人賽 Modern Web DAY 7

CSS Flex/Grid Layout Modules 系列第 7 篇

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

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

閃光洽 ‧ 2021-09-12

1 Like 1 留言 3174 瀏覽

鐵人賽 Modern Web DAY 30

CSS 實戰心法系列第 30 篇

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

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

卡斯伯 ‧ 2016-12-30

0 Like 0 留言 3161 瀏覽

鐵人賽自我挑戰組 DAY 8

大二萌新的學習紀錄系列第 8 篇

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

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

ㄙㄩˊ ‧ 2021-09-22 ‧團隊imac_跳過這篇

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 1 留言 2775 瀏覽

鐵人賽 Modern Web DAY 24

CSS 實戰心法系列第 24 篇

技術實戰心法 - 自幹 Grid System

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

卡斯伯 ‧ 2016-12-24

2 Like 1 留言 2742 瀏覽

鐵人賽 Modern Web DAY 8

【我不會寫 React Component 】系列第 8 篇

技術什麼是 Grid 網格【我不會寫 React Component 】

關於這個 Pattern Grid 是一個容器組件，內部包含許多資訊跟交互元素。並可以讓用戶可以透過ArrowHomeEnd在容器內中移動。作為一種泛用的...

HelloKayac ‧ 2022-09-21

1 Like 0 留言 2645 瀏覽

鐵人賽 Modern Web DAY 9

CSS Flex/Grid Layout Modules 系列第 9 篇

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

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

閃光洽 ‧ 2021-09-14

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

0 Like 0 留言 2564 瀏覽

鐵人賽 Modern Web DAY 12

CSS Flex/Grid Layout Modules 系列第 12 篇

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

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

閃光洽 ‧ 2021-09-17

2 Like 0 留言 2445 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

placeholder name ‧ 2020-10-14

1 Like 0 留言 2349 瀏覽

鐵人賽 Modern Web DAY 6

CSS Flex/Grid Layout Modules 系列第 6 篇

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

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

閃光洽 ‧ 2021-09-11

1 Like 0 留言 2321 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

placeholder name ‧ 2020-10-05

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