用 CSS grid 來實作 RWD

更新 發佈閱讀 3 分鐘

css grid在排版非常好用,搭配media query即可達到RWD的效果,以下直接附上sample code:

https://gist.github.com/snailsmall612/997012803bc4803276fa23416fa05f6c

結果如下:

width > 1200px:

raw-image

width <= 1200px:

raw-image

width <= 800px:

raw-image

width <= 400px:

raw-image


接著刻意讓第三個框框高度設為400px,畫面結果如下:

raw-image

可以看到第二列的格子並不會往上補滿空隙~


使用bootstrap可以達到一樣的效果,差別在於bootstrap的html會比較複雜,css grid的html簡潔很多。另外,css grid的自由度很高,可以自定義break point來佈局排版,比較不會被框架限制住,雖然bootstrap 5 也有提供透過scss變數來調整break point,但個人還是比較喜歡使用css grid,至少不用為了grid system引入一大包bootstrap。



本筆記參考:
1. https://muki.tw/tech/css-grid-note/
2. https://medium.com/enjoy-life-enjoy-coding/css-%E6%89%80%E4%BB%A5%E6%88%91%E8%AA%AA%E9%82%A3%E5%80%8B%E7%89%88%E8%83%BD%E4%B8%8D%E8%83%BD%E5%A5%BD%E5%88%87%E4%B8%80%E9%BB%9E-grid-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-cd763091cf70
3. https://dev.to/sterlingperry/bootstrap-vs-css-grid-2j7p

留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法,同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
Thumbnail
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法,同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
Padlet
Thumbnail
Padlet
Thumbnail
在 Modern Web 的世界中,已經有非常多的套件、語法、框架,可以解決大部分網頁排版問題。 以我近期的觀察來說,在專案開發時,大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構,而採取原生的 CSS 寫法,而不是仰賴快速又方便的套件。
Thumbnail
在 Modern Web 的世界中,已經有非常多的套件、語法、框架,可以解決大部分網頁排版問題。 以我近期的觀察來說,在專案開發時,大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構,而採取原生的 CSS 寫法,而不是仰賴快速又方便的套件。
Thumbnail
都市傳說:「網頁跑版時,設定 box-sizing: border-box一切搞定!」
Thumbnail
都市傳說:「網頁跑版時,設定 box-sizing: border-box一切搞定!」
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News