Позиционирование DOV с такой же шириной внутри сети ⇐ Html

[Anonymous]

Я не могу понять, почему все DOV в этом HTML не с той же шириной. У меня не так много опыта работы с Grid, поэтому я немного смущен. Divs 3, 4 и 5 имеют гораздо большую ширину, и я не могу понять, почему это так. Snippet-Code ">

Код: Выделить всё

div { border: 1px solid black; }
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
width: 100%;
padding: 1rem;

.box {
display: flex;
align-items: center;
justify-content: center;
}
}

.div1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.div2 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}

.div3 {
grid-column: 2 / 4;
grid-row: 1 / 2;
}

.div4 {
grid-column: 2 / 4;
grid-row: 2 / 3;
}

.div5 {
grid-column: 2 / 4;
grid-row: 3 / 4;
}

.div6 {
grid-column: 4 / 5;
grid-row: 1 / 2;
}

.div7 {
grid-column: 4 / 5;
grid-row: 2 / 3;
}< /code>

DIV1
DIV2
DIV3
DIV4
DIV5
DIV6
DIV7

Подробнее здесь: https://stackoverflow.com/questions/794 ... nside-grid