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? 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>

Ваш ответ

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

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