Вот изображение, отображающее мою проблему, < /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
