尝试Grid布局时，栅格项justify-self align-self 内容居中出现BUG

Question

1，尝试Grid布局时，栅格项justify-self align-self 内容居中出现BUG,内容居中了，但是背景也跟着缩小到内容大小

---

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;        
    }
}

---

1. item2加上justify-self align-self效果

原来的效果

菜鸟真诚求解！