0

У меня есть 8 блоков обернутых в grid-контейнере.

Два нижних блока находятся слева. Как мне поместить их по середине использую только CSS Grid Layout?

.block__products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.grid-element {
  height: 300px;
  background-color: #F7F0DD;
  cursor: pointer;
  transition: .9s;
}

.grid-element-one:hover {
  background-color: #ffec41;
}

.grid-element-two:hover {
  background-color: #FF2929;
}

.grid-element-three:hover {
  background-color: #4f75f4;
}

.grid-element-four:hover {
  background-color: #49cc63;
}
<div class="block__products-grid">
  <div class="grid-element grid-element-one"></div>
  <div class="grid-element grid-element-two"></div>
  <div class="grid-element grid-element-three"></div>
  <div class="grid-element grid-element-four"></div>
  <div class="grid-element grid-element-one"></div>
  <div class="grid-element grid-element-two"></div>
  <div class="grid-element grid-element-three"></div>
  <div class="grid-element grid-element-four"></div>
</div>

2
  • Грид для того и нужен, что он сетка. Используй flex вместо него.
    – Qwertiy
    9 июл 2019 в 13:19
  • Корректно ли будет задавать при адаптации страницы в классы "grid-element" и тому подобное flexbox'ы? 9 июл 2019 в 14:16

1 ответ 1

0

Не уверен, что можно положить два блока в грид из трех клеток, чтобы они не пересекались и были ближе к центру. Возможно вам стоит попробовать сделать более сложный грид с 6 колонками в ширину, где 1-6 объекты будут занимать по 2 клетки рядом друг с другом, а последние 2 объекта займут центральные 4 колонки по 2 каждый.

например, как тут:

grid-template-areas: 
 "a a b b c c"
 "d d e e f f"
 "g g g h h h"

Где для g и f вы зададите отступы или выравнивание

Альтернативно можно поместить большой объект в нижний ряд грида и использовать flex для одномерного выравнивания.

1
  • Принципиально хочу сделать это Гридами. Проверил ваш метод, он не сработал в моем случае codepen.io/VadimStrelov/pen/xoQvoM 9 июл 2019 в 14:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.