0

У меня есть 3 элемента, решил их сделать адаптивным с помощью CSS Grid.

.elements-wrapper {
  position: relative;
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 60px;
  margin-bottom: 10%;
}
<div class="elements-wrapper">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-2"></div>
</div>

Все работает, но на маленьких экранах где то после 1200 третий элемент опускается вниз и располагается по левому или по правому краю.

 | element1 | | element2 |      или  | element1 | | element2 |
 | element3 |                                     | element3 |

А я хочу чтоб он был в центре. Ну примерно вот такой вид нужен.

| element1 |  | element 2 |
       |element 3 |  
1
  • А что мешает использовать media query? Commented 6 мар. 2018 в 13:33

1 ответ 1

0

Не знаю как с помощью CSS Grid, там все же строго по сетке все. А вот с помощью Flexbox это просто.

  1. Задаем контейнеру свойство flex-wrap со значением wrap, чтобы элементы переходили на следующую строку, а не сжимались.
  2. Контейнеру задаем свойство justify-content: center, оно как раз и отцентрует нижний элемент.

.elements-wrapper-flex {
  position: relative;
  clear: both;
  display: flex;
  margin-bottom: 10%;
  max-width: 1200px;
  flex-wrap: wrap;
  justify-content: center;
}

.element-flex {
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 300px;
  margin: 1rem;
}
<div class="elements-wrapper-flex">
  <div class="element-flex">1</div>
  <div class="element-flex">2</div>
  <div class="element-flex">3</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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