用 CSS grid 來實作 RWD
css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code:
結果如下:
width > 1200px:
width <= 1200px:
width <= 800px:
width <= 400px:
接著刻意讓第三個框框高度設為400px，畫面結果如下:
可以看到第二列的格子並不會往上補滿空隙~
使用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
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
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法，同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
在CSS Battle的第153題，我們會使用grid、css選擇器、偽元素等技巧來解決西洋棋盤的排版問題。這篇文章分享了完整的解法，包括選擇器使用、偽元素的應用以及其他排版技巧，並激勵讀者分享自己的解法。
本篇文章介紹了 CSS Battle 第 163 題的解法，並分享了作者的實際操作方法。透過使用 gird 排版、before & after 搭配 overflow: hidden 等修飾來創建多邊形。這篇提供了基本的 CSS 切版技術以及解法分享。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法，並介紹了grid的使用方式，以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Grid Post這個App是為了IG排版而存在的，我很喜歡裡面的「全景剪裁」功能，讓讀者透過滑動把整張照片看完，帶來不一樣的視覺變化。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法，同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
在CSS Battle的第153題，我們會使用grid、css選擇器、偽元素等技巧來解決西洋棋盤的排版問題。這篇文章分享了完整的解法，包括選擇器使用、偽元素的應用以及其他排版技巧，並激勵讀者分享自己的解法。
本篇文章介紹了 CSS Battle 第 163 題的解法，並分享了作者的實際操作方法。透過使用 gird 排版、before & after 搭配 overflow: hidden 等修飾來創建多邊形。這篇提供了基本的 CSS 切版技術以及解法分享。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法，並介紹了grid的使用方式，以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Grid Post這個App是為了IG排版而存在的，我很喜歡裡面的「全景剪裁」功能，讓讀者透過滑動把整張照片看完，帶來不一樣的視覺變化。