Другая область сетки при использовании столбца-шаблона сетки ⇐ CSS

[Anonymous]

Я пытаюсь отобразить 4 изображения в неравномерной сетке, на первый взгляд, я добавил два прозрачных поля немного меньшей высоты, чем изображения: одно в начале первого столбца и одно в конце второго столбца.< /p>
Я прикреплю к коду изображения того, чего я пытаюсь достичь, и того, что я сделал.
[img]https:// i.sstatic.net/IkUBFqWk.png[/img]

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

.image-grid {
grid-area: I;
display: grid;
grid-template-columns: repeat(2, 0.5fr);
grid-template-rows: auto auto auto;
gap: 1rem;
justify-self: start;
}

.image-grid img {
width: 176px;
height: 176px;
border-radius: 8px;
}

.transparent-box {
width: 176px;
height: 140px;
background-color: rgba(0, 0, 0, 0.00);
border-radius: 8px;
}

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

[img]images/1.jpg[/img]
[img]images/2.jpg[/img]
[img]images/3.jpg[/img]
[img]images/4.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ate-column