Задать вопрос
NikMaster777
@NikMaster777
css-grid

Как в griid выровнять по центру не полный ряд?

Ребята подскажите как в grid выровнять колонку в ряду по центру? Ситуация следующая.
Выравниваю например:
grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
Получаю расположение (если по 2 блока в ряду):
- -
-
А нужно чтобы во втором ряду колонка была по центру так как она там одна:
- -
-
  • Вопрос задан
  • 110 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
NikMaster777
@NikMaster777 Автор вопроса
Получилось так:
<head>
  <style>
    .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  position: relative;
  width: 40%;
}

.grid-item {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.grid-item:nth-child(4),
.grid-item:nth-child(5) {
  position: relative;
  left: 50%;
}

  </style>
</head>
<body>
  <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

</body>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Требуется завершить backend (проектная работа)
25 апр. 2024, в 19:42
49000 руб./за проект
Проверить тест по Data Science
25 апр. 2024, в 19:41
2000 руб./за проект
Ещё заказы