用 CSS grid 來實作 RWD
閱讀時間約 2 分鐘
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 追蹤
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
在 RWD 設計當中，很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版（格線系統）可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做，而是自己撰寫 CSS 的話，或許可以試著用設定最大或最小寬度來完成自適應。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
矢掛町位於岡山縣西南部，氣候溫暖，春天，您可以在小田川沿岸和嵐山欣賞櫻花和油菜花盛開的日本鄉村美景；夏日的夜晚，星田川沿岸、美山川沿岸的宇內螢火蟲公園裡，散發著微弱光芒的螢火蟲瘋狂地舞動；秋天，被譽為名勝的大通寺的池塘噴泉觀賞庭園，銀杏樹等紅葉點綴其間，景色十分美麗；冬天，從町內或附近的展望台可
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果...
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
「px」，即像素，是最基本的單位，它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小，「em」在子元素中的適用，而「rem」則以根元素為參考。另一方面，「vh」和「vw」分別代表視窗的高度和寬度百分比，特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
在 RWD 設計當中，很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版（格線系統）可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做，而是自己撰寫 CSS 的話，或許可以試著用設定最大或最小寬度來完成自適應。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
矢掛町位於岡山縣西南部，氣候溫暖，春天，您可以在小田川沿岸和嵐山欣賞櫻花和油菜花盛開的日本鄉村美景；夏日的夜晚，星田川沿岸、美山川沿岸的宇內螢火蟲公園裡，散發著微弱光芒的螢火蟲瘋狂地舞動；秋天，被譽為名勝的大通寺的池塘噴泉觀賞庭園，銀杏樹等紅葉點綴其間，景色十分美麗；冬天，從町內或附近的展望台可
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果...
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
「px」，即像素，是最基本的單位，它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小，「em」在子元素中的適用，而「rem」則以根元素為參考。另一方面，「vh」和「vw」分別代表視窗的高度和寬度百分比，特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大