我必须将7个div
s(图像)放在两行中,第一行中有3行,第二行中有4行。前三名div
s应该居中,底部4可以占据所有空间。
这是我做的:
.content {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr repeat(3, 170px) 1fr;
grid-template-areas: ". item1 item2 item3 ."
"item4 item5 item6 item7";
grid-template-rows: 1fr 1fr;
}
.content .box {
width: 170px;
height: 170px;
border: solid 1px #000;
}
.content.box:nth-child(1) {
grid-area: box1;
}
.content.box:nth-child(2) {
grid-area: box2;
}
.content.box:nth-child(3) {
grid-area: box3;
}
.content.box:nth-child(4) {
grid-area: box4;
}
.content.box:nth-child(5) {
grid-area: box5;
}
.content.box:nth-child(6) {
grid-area: box6;
}
.content.box:nth-child(7) {
grid-area: box7;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
顾名思义,网格必须形成网格。这意味着列数必须是所有行的空间。
因此,浏览器不接受您的区域样式,因为它的第一行有5列,第二行有4列。
@kukkuz已经发布了一个纠正这个问题的答案。在这里,你有另一种可能性,在我的竞争中更多地根据你的要求调整。
无论如何,这种布局的最佳解决方案可能是使用flex(因为布局不是真正的网格)
.content {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(8, 100px);
grid-template-areas: "empt box1 box1 box2 box2 box3 box3 emp2"
"box4 box4 box5 box5 box6 box6 box7 box7";
grid-template-rows: 1fr 1fr;
}
.content .box {
width: 180px;
height: 170px;
border: solid 1px #000;
}
.content .box:nth-child(1) {
grid-area: box1;
}
.content .box:nth-child(2) {
grid-area: box2;
}
.content .box:nth-child(3) {
grid-area: box3;
}
.content .box:nth-child(4) {
grid-area: box4;
}
.content .box:nth-child(5) {
grid-area: box5;
}
.content .box:nth-child(6) {
grid-area: box6;
}
.content .box:nth-child(7) {
grid-area: box7;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
CSS更改:消除所有CSS代码(在您的问题中)并用此替换它。使用grid-template-columns: 1fr repeat(3, 170px) 1fr;
搞砸了,因为它不代表两排盒子。使用grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
允许浏览器/系统确定该特定行的实际位置。它让每一行都做自己的事情。使用place-items: end center;
表示您希望所有内容都居中,但您希望系统从最后开始然后居中。这可以防止事物被卡在最左边。注意:您不需要任何其他CSS来获得所需的效果。只是.content
和.box
类。没有其他的。
.content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
place-items: end center;
}
.box {
width: 170px;
height: 170px;
border: solid 1px #000;
}
HTML更改:将html替换为(下方)。这会将框分成两行。我用qazxsw poi包裹每一行,这样它们可以包含不同数量的盒子而没有问题。
.content
我希望我的解释能帮助您更好地理解CSS网格布局。 :)
您可以使用<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="content">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
创建12列网格:
grid-template-columns: repeat(12, 1fr)
将容器与中心对齐以获得中心对齐。justify-items: center
进行所需的布局。请参阅下面的演示:
justify-self
.content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
justify-items: center;
}
.content .box {
height: 170px;
width: 170px;
border: solid 1px #000;
}
.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
justify-self: flex-start;
}
包含图片的演示:
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
.content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
justify-items: center;
}
.content .box {
border: solid 1px #000;
}
.box img {
display: block;
width: 100%;
}
.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
justify-self: flex-start;
}