作者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/cn.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