有CSS网格容器大小的问题

Question

我是一个使用网格的新手，所以请，如果这个问题太愚蠢，不要这么严厉地评判我，哈哈总之，我想要一个5div的布局。所以我有了基本的轮廓，但是我想让这个网格占屏幕宽度的100%，我在这方面很失败。

这是我的html:

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

这里是css:

.parent {
display: grid;
grid-template-columns: repeat(6, 5vw);
grid-template-rows: repeat(6, 5vw);
grid-column-gap: 60px;
grid-row-gap: 60px;
width: 100%;
}
.div1 { 
grid-area: 1 / 1 / 4 / 4; 
background-color: green;
}
.div2 { 
grid-area: 4 / 1 / 7 / 4; 
background-color: black;
}
.div3 { 
grid-area: 1 / 4 / 3 / 7; 
background-color: black;
float: right;
}
.div4 { 
grid-area: 3 / 4 / 5 / 7; 
background-color: black;
float: right;
}
.div5 { 
grid-area: 5 / 4 / 7 / 7; 
background-color: black;
float: right;
}

任何帮助都会很感激谢谢你的时间<3

Answer 1

你只改变grid-template-columns: repeat(6,5vw);

.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 5vw);
grid-column-gap: 60px;
grid-row-gap: 60px;
width: 100%;
}
.div1 {
grid-area: 1 / 1 / 4 / 4;
background-color: green;
}
.div2 {
grid-area: 4 / 1 / 7 / 4;
background-color: black;
}
.div3 {
grid-area: 1 / 4 / 3 / 7;
background-color: black;
}
.div4 {
grid-area: 3 / 4 / 5 / 7;
background-color: black;
}
.div5 {
grid-area: 5 / 4 / 7 / 7;
background-color: black;
}

<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>