@poles1469

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

Добрый день!

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

<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
  • Вопрос задан
  • 880 просмотров
Решения вопроса 1
RAX7
@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;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы