Как перевернуть последние 2 колонки в css grid?

Question

[poles1469]

Добрый день!

Вот код пример кода:

<div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
</div>

.grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(1, 655px 475px);
    justify-content: center;
}
 
.grid__item {
    background-color: #000;
    height: 320px;
}

Мне нужно, что бы последние 2 колонки встали наоборот, или же как в flex, что бы это сделать, я использовал бы: flex-direction: column-reverse; тогда  последние две колонки встали бы 475px 655px, а не 655px 475px, надеюсь вы поняли.

Только я без понятия как это делать в grid

Comments

[Alex_mos]

Может попробовать через псевдоклас последнему и предпоследнему задать размеры как вам нужно

[fff ttt]

Думаю это поможет:
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Answer 1

[RAX7]

.grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 475px 180px 475px;
    justify-content: center;
}
 
.grid__item {
    background-color: #000;
    height: 320px;
}

.grid__item:nth-child(odd) {
  grid-column-end: span 2;
}

.grid__item:nth-last-child(-n + 2) {
  grid-column: 1 / span 1;
}

.grid__item:nth-last-child(-n + 1) {
  grid-column: 2 / span 2;
}