带有行/colspans的CSS网格
带有行/colspans的CSS网格
提问于 2022-08-03 15:59:38
在CSS网格中寻找行/colspan的帮助--我已经构建了以下布局，但我无法让蓝色部分跨越与下面紫色部分相同的两列：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
* { box-sizing: border-box; }
body { margin: 0px; background: #FFFFFF; }
.grid { width: 100%; height: 100vh; padding: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; }
.grid-col { display: flex; padding: 25px; align-items: center; }
.grid-col p { width: 100%; margin: 0px; text-align: center; }
.grid-col p span { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #FFFFFF; }
.grid-1 { background: red; grid-row: 1 / 3; grid-column: 1 / 3; }
.grid-2 { background: orange; grid-row: 1 / 2; grid-column: 3; }
.grid-3 { background: yellow; grid-row: 1 / 2; grid-column: 4; }
.grid-4 { background: green; grid-row: 3 / 5; grid-column: 1 / 3; }
.grid-5 { background: blue; grid-row: 2 / 4; grid-column 3 / 5; }
.grid-6 { background: purple; grid-row: 4 / 5; grid-column: 3 / 5; }
</style>
</head>
<body>
<div class="grid">
<div class="grid-col grid-1"><p><span>1</span></p></div>
<div class="grid-col grid-2"><p><span>2</span></p></div>
<div class="grid-col grid-3"><p><span>3</span></p></div>
<div class="grid-col grid-4"><p><span>4</span></p></div>
<div class="grid-col grid-5"><p><span>5</span></p></div>
<div class="grid-col grid-6"><p><span>6</span></p></div>
</div>
</body>
</html>
我是CSS网格的新手，所以很可能会出现错误，导致它不能像预期的那样工作(我一直在阅读其他帖子，尝试和修改错误，看看什么能工作，什么不起作用，但我仍然对布局的工作方式有些困惑)--这里的任何帮助都是非常感谢的。谢谢!
回答 2
Stack Overflow用户
发布于 2022-08-03 17:14:48
你忘带结肠了
.grid-5 { background: blue; grid-row: 2 / 4; grid-column 3 / 5; }
^^^^^由于CSS忽略规则集中的错误语法，因此它应用了您设置的其他属性值。这就是为什么当你写CSS的时候，你应该更加专注。
为了避免这种情况，我建议使用firefox版本。它突出了css中的错误，显示了特性冲突等。它也为devtools中的网格和柔性盒布局提供了最好的工具。
Stack Overflow用户
发布于 2022-08-03 17:33:16
CSS中的错误是答案--如果其他人正在寻找一个带有行/colspan解决方案的网格，那么就不提这个问题了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73224360
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号