3 Секция CSS CSS -сетка - Могу ли я иметь 2 -ю высоту столбца [дубликат] ⇐ CSS

[Anonymous]

У меня есть проблема, которую я хочу, я хочу 3 сетки с сети, и я хочу, чтобы второй столбец имел немного большую высоту, а затем влево/правый столбец. Можно ли это сделать с помощью сетки? Я попытался использовать метод SPAN с сети, например, SPAN 4 для всего столбца, и SPAN 5 для 2-го столбца. Но это делает его расстройством последовательных элементов, как вы можете видеть на скриншоте. Я хочу большую высоту для желтых элементов/столбца. >
Есть ли способ достичь этого с помощью сетки CSS? код ">
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: fit-content();
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
grid-auto-rows: max-content;
}

.grid-container > div:nth-child(3n+2) {
background-color: yellow;
grid-area: span 6 / span 4;
}
.grid-container > div:nth-child(3n+1),
.grid-container > div:nth-child(3n+3) {
background-color: red;
grid-area: span 6 / span 4;
}

/* Grid 2 ==== */
.grid-container.grid-2 > div:nth-child(3n+2) {
background-color: yellow;
grid-area: span 7 / span 4;
}
.grid-container.grid-2 > div:nth-child(3n+1),
.grid-container.grid-2 > div:nth-child(3n+3) {
background-color: red;
grid-area: span 6 / span 4;
}< /code>
Grid area test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


Grid two

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< /code>
< /div>
< /div>
< /p>



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