PTT數位生活區 / Web_Design

[請益] 請問如何用普通的CSS做出這樣的Grid呢？

看板Web_Design作者 (WildDagger)時間1年前 (2023/03/11 23:08), 1年前編輯推噓1(1推 0噓 2→)
留言3則, 3人參與, 1年前最新討論串1/1
如題 想用普通的HTML和CSS做出下面這個樣子的版型 https://images.plurk.com/4pYjR6aHG84rJtBFip2VE8.png
HTML我目前是寫成這樣 https://images.plurk.com/dNKNQcDuI8mdcA0MyZ6G0.png
CSS雖然有參考網路上面寫的Grid指令 https://images.plurk.com/m3RHcOOgjwJBcSltol6n7.png
不過寫成這樣在瀏覽器看起來跟我想要的效果差很多Orz https://images.plurk.com/7MtpQsFpzskctyKVUerg1g.png
不知道應該怎樣去修改它比較好Orz 還是我應該改成用Flex去弄比較好呢…… -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.225.32.245 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1678547332.A.EB1.html
→
03/12 02:51, 1年前 , 1F
flex跟gap也可以做到，如果你習慣用flex的話
03/12 02:51, 1F
我也是想用Flex，不過不知道該怎麼用Orz
→
03/12 10:30, 1年前 , 2F
為什麼code不放codepen哩？
03/12 10:30, 2F
https://codepen.io/WildDagger/pen/yLxvamq 不好意思補上 目前大概是這樣用…… 我是想做一個類似Metro UI的網站介面 (然後我昨天做了才發現原來flex-direction: column有Bug， 真的想要調整成類似Metro那樣的顯示模式的話會導致版面配置有問題Orz 以這個網站案例來說，就是Contact會因為寬度只有算到第一欄而疊到Work上面) ※ 編輯: hoyunxian (36.225.23.119 臺灣), 03/12/2023 22:10:50
推
03/14 00:56, 1年前 , 3F
grid-area
03/14 00:56, 3F
‣ 更多 hoyunxian 的文章
文章代碼(AID): #1a39c4wn (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 hoyunxian 的文章
文章代碼(AID): #1a39c4wn (Web_Design)