1. When you try the Grid layout, the grid item justify-self align-self content is centered and the BUG, content is centered, but the background also shrinks to the content size
< hr >A.html
< div class= "container" >
<div class="test">
<div class="grid-item grid-item1">1</div>
<div class="grid-item grid-item2">2</div>
<div class="grid-item grid-item3">3</div>
<div class="grid-item grid-item4">4</div>
</div>< / div >
B css
.container .test {
display: grid;
grid-template-columns: 1fr 2fr 1fr ;
grid-template-rows: 50px 50px 50px;
grid-template-areas:
"header main main "
"header main main"
"footer footer contrast";
color: white;
}
.container{
width: 300px;
}
.grid-item1{
grid-area: header;
background: black;
}
.grid-item2{
grid-area: main;
align-self: center;
justify-self: center;
background: red;
}
.grid-item3{
grid-area: footer;
background: yellow;
}
.grid-item4{
grid-area: contrast;
background: blueviolet;
}
@media screen and (max-width:750px){
.container{
background: red;
}
.container .test{
display: grid;
grid-template-columns: 1fr 2fr 1fr ;
grid-template-rows: 50px 50px 50px;
grid-template-areas:
"header header header"
"main main main"
"footer footer contrast";
color: white;
}
}
- item2 plus justify-self align-self effect
rookie sincerely solve the problem!