CSS GRID промежутки, выходящие за пределы ширины контейнера ⇐ CSS

[Anonymous]

Я практиковал сетку CSS, когда столкнулся с этой проблемой. Ширина. < /p>
Вот изображение, отображающее мою проблему, < /p>

Свойство столбца включено < /p>


Если я отключаю свойство с столбцом с столбцом, все кажется мне хорошо. < /p>

Свойство столбца отключено < /p>
< /blockquote>

Я не уверен, что я делаю что -то не так или нет. Есть ли какая-либо альтернатива или решение для этого? > Нужна помощь в понимании этого. < /P>
Спасибо за ваше время и помощь !! Class = "Snippet-Code">

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

* {
box-sizing: border-box;
}

body {
margin: 20px;
padding: 0;
}

.container {
min-height: 500px;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: 5rem minmax(10px, auto) 100px;
row-gap: 10px;
column-gap: 20px;
}

.el1 {
background-color: red;
grid-column: 1 / -1;
grid-row: 1 / 2;
}

.el2 {
background-color: green;
grid-area: 2 / 1 / 3 / 2;
}

.el3 {
background-color: blue;
grid-column: 2 / -1;
grid-row: 2 / 3
}

.el4 {
background-color: purple;
grid-column: 1 / -1;
grid-row: 3 / -1;
}< /code>






CSS Grid Practice



Element 1
Element 2
Element 3
Element 4

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