用 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 追蹤
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
矢掛町位於岡山縣西南部，氣候溫暖，春天，您可以在小田川沿岸和嵐山欣賞櫻花和油菜花盛開的日本鄉村美景；夏日的夜晚，星田川沿岸、美山川沿岸的宇內螢火蟲公園裡，散發著微弱光芒的螢火蟲瘋狂地舞動；秋天，被譽為名勝的大通寺的池塘噴泉觀賞庭園，銀杏樹等紅葉點綴其間，景色十分美麗；冬天，從町內或附近的展望台可
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果...
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
「px」，即像素，是最基本的單位，它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小，「em」在子元素中的適用，而「rem」則以根元素為參考。另一方面，「vh」和「vw」分別代表視窗的高度和寬度百分比，特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大
文 / 台灣話 tâi-uân-uē
很高興這次有機會能參加雜學校所舉辦的普列斯製造共識營，透過和地方夥伴的交流，以及講者們深入淺出地介紹，都讓我們對地方創生有了更多的想像，更近一步去思考有什麼樣的方式可以落地，回饋團隊紮根之地。
這次營隊在桃園龍潭舉行，雜學校也實際安排許多活動，讓參與者更加
相信透過之前的介紹，大家對於 CSS 選擇器（CSS selector）已經不陌生了，今天我們要來聊聊兩個在實務上非常好用的偽類（pseudo class ）語法，他們分別是 :nth-child() 與 :nth-of-type()，在了解這兩個語法之前，我們首先要先來聊聊什麼是「偽類」呢？
相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？
每個人的靈魂本質都是獨特的，有人害怕自己的獨特，因為這個獨特使他異於常人，而這異於常人會受到自己身邊人的排擠或非議。
然後他們過著別人期望他們過的生活，成為別人希望他們成為的人。這樣的靈魂幾乎沒有時間發展到真正的自我，因為他們都在處理別人的期望，而不是自己的議題。
知識工作者藉由內容輸出吸引認同的人、累積影響力，進而知識變現，相信一定希望將產出內容盡可能的傳播出去，最好要能成為經典、流傳越久越好。
這該如何做到呢？也許因伊隆．馬斯克而紅的「第一性原理」能夠給我們一些提示，也能解釋為何會有這麼多關於輸出、出書、教學的建議。
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
矢掛町位於岡山縣西南部，氣候溫暖，春天，您可以在小田川沿岸和嵐山欣賞櫻花和油菜花盛開的日本鄉村美景；夏日的夜晚，星田川沿岸、美山川沿岸的宇內螢火蟲公園裡，散發著微弱光芒的螢火蟲瘋狂地舞動；秋天，被譽為名勝的大通寺的池塘噴泉觀賞庭園，銀杏樹等紅葉點綴其間，景色十分美麗；冬天，從町內或附近的展望台可
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果...
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
「px」，即像素，是最基本的單位，它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小，「em」在子元素中的適用，而「rem」則以根元素為參考。另一方面，「vh」和「vw」分別代表視窗的高度和寬度百分比，特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大
文 / 台灣話 tâi-uân-uē
很高興這次有機會能參加雜學校所舉辦的普列斯製造共識營，透過和地方夥伴的交流，以及講者們深入淺出地介紹，都讓我們對地方創生有了更多的想像，更近一步去思考有什麼樣的方式可以落地，回饋團隊紮根之地。
這次營隊在桃園龍潭舉行，雜學校也實際安排許多活動，讓參與者更加
相信透過之前的介紹，大家對於 CSS 選擇器（CSS selector）已經不陌生了，今天我們要來聊聊兩個在實務上非常好用的偽類（pseudo class ）語法，他們分別是 :nth-child() 與 :nth-of-type()，在了解這兩個語法之前，我們首先要先來聊聊什麼是「偽類」呢？
相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？
每個人的靈魂本質都是獨特的，有人害怕自己的獨特，因為這個獨特使他異於常人，而這異於常人會受到自己身邊人的排擠或非議。
然後他們過著別人期望他們過的生活，成為別人希望他們成為的人。這樣的靈魂幾乎沒有時間發展到真正的自我，因為他們都在處理別人的期望，而不是自己的議題。
知識工作者藉由內容輸出吸引認同的人、累積影響力，進而知識變現，相信一定希望將產出內容盡可能的傳播出去，最好要能成為經典、流傳越久越好。
這該如何做到呢？也許因伊隆．馬斯克而紅的「第一性原理」能夠給我們一些提示，也能解釋為何會有這麼多關於輸出、出書、教學的建議。