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

[hoyunxian (WildDagger)]

如題
想用普通的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
→ ReadSnow: flex跟gap也可以做到，如果你習慣用flex的話
我也是想用Flex，不過不知道該怎麼用Orz
→ t520131412: 為什麼code不放codepen哩？
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
推 VdustR: grid-area