作者hoyunxian (WildDagger)
看板Web_Design
標題[請益] 請問如何用普通的CSS做出這樣的Grid呢？
時間Sat Mar 11 23:08:47 2023
如題
想用普通的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://webptt.com/m.aspx?n=bbs/Web_Design/M.1678547332.A.EB1.html
1F：→ ReadSnow: flex跟gap也可以做到，如果你習慣用flex的話 03/12 02:51
我也是想用Flex，不過不知道該怎麼用Orz
2F：→ t520131412: 為什麼code不放codepen哩？ 03/12 10:30
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
3F：推 VdustR: grid-area 03/14 00:56