有没有告诉我的gp1
类列从网格位置1开始,到max-1结束,记住这是一个动态网格?
null
.widthContainer {
width:400px;
height:300px;
background-color:#eee;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 50px);
grid-template-rows: repeat(auto-fit, 25px);
min-height: 98%;
}
.grid>div {
grid-column: 1/-1;
grid-row: 1/-1;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(25px, 1fr));
display: grid;
}
.gp1 {
background-color: #aaa;
grid-row-start: 2;
grid-row-end: 4;
grid-column-start:2;
grid-column-end:4;
}
<div class="widthContainer">
<div class="grid">
<div class="bkg">
<div class="gp1">
<div>
<p>content</p>
</div>
</div>
</div>
</div>
</div>
null
是的。 对网格-列-结束
使用-2
null
.widthContainer {
width: 400px;
height: 300px;
background-color: #eee;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 50px);
grid-template-rows: repeat(auto-fit, 25px);
min-height: 98%;
}
.grid>div {
grid-column: 1/-1;
grid-row: 1/-1;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(25px, 1fr));
display: grid;
}
.gp1 {
background-color: #aaa;
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: -2;
}
<div class="widthContainer">
<div class="grid">
<div class="bkg">
<div class="gp1">
<div>
<p>content</p>
</div>
</div>
</div>
</div>
</div>