html - 使网格页面的整个部分具有不同的背景颜色
问题描述
我希望块 3 到块 6 的背景颜色不同,但没有任何填充和边距。喜欢它的整页背景颜色。我该怎么做?
.container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5%;
row-gap: 1.5%;
margin-bottom: 30%;
}
div {padding:5%; border:1px gray solid;}
<div class = "container">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div><div>
4
</div><div>
5
</div>
<div>
6
</div>
<div>
7
</div>
</div>
解决方案
检查这个:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.item {
border: 1px gray solid;
color: white;
padding: 20px;
text-align: center;
}
.item1 {
grid-area: 1 / 1 / 2 / 2;
background: red;
}
.item2 {
grid-area: 1 / 2 / 2 / 3;
background: green;
}
.item3 {
grid-area: 2 / 1 / 4 / 3;
background: blue;
}
.item4 {
grid-area: 4 / 1 / 5 / 2;
background: brown;
}
<div class="container">
<div class="item item1">
1
</div>
<div class="item item2">
2
</div>
<div class="item item3">
3-6
</div>
<div class="item item4">
7
</div>
</div>
代码笔: https ://codepen.io/manaskhandelwal1/pen/qBaMoVm
推荐阅读
- jquery - Tampermonkey:试图点击按钮
- c# - 如果 ML .net 中的列名不同,如何动态加载模型以进行情感分析?
- java - 我怎样才能在列表中按索引Java Android Studio中的最后一个数字
- powershell - 调用 PowerShell 脚本时如何将唯一值传递给函数?
- angular - 如何在 Chrome 扩展后台页面中使用 TypeScript 导入?
- mysql - 错误:MySQL 意外关闭 [XAMPP]
- django - 如何在 Django 中通过自定义模型对用户进行身份验证
- vue.js - v-for 超过迭代次数 3x 次
- c# - R中的移位运算符
- java - 列表中的列表 Java 中的排序问题