Возможно, вы новичок в CSS и задаетесь вопросом, следует ли вам использовать flex или grid для своего макета, или, возможно, вы слышали популярное утверждение о том, что нужно использовать flex для одномерного макета и grid для 2D-макета вы попали в нужное место.

Эта статья покажет вам разницу между flex и grid, а также покажет, когда что использовать, чтобы вы могли с уверенностью использовать подходящий вариант для своего проекта!

Развенчание мифов 🎈📌

Начнем с развенчания распространенного мифа о том, что flex и grid ограничены одномерными и двумерными макетами.

В качестве основы мы будем использовать следующий HTML:

<div class="container">
  <div>
    Lorem, ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur.
  </div>
  <div>
    Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Facilis.
  </div>
  <div>
    Lorem ipsum dolor sit amet.
  </div>
  <div>
    Lorem ipsum dolor sit, amet consectetur
    adipisicing elit.
  </div>
  <div>
    Lorem, ipsum dolor.
  </div>
</div>

И добавьте следующий CSS, чтобы сделать границы элементов видимыми:

.container {
  border: 1px solid #000;
}
.container > div {
  border: 1px solid #000;
}

Вот что мы получаем:

2D-макет с Flex

При добавлении display: flex в CSS

.container {
  display: flex;
}

Элементы выстраиваются в ряд.

Добавление еще одного свойства в CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

Элементы, которые не могут быть размещены в первой строке, переходят на следующую строку, а миф о том, что flex можно использовать для одномерного макета, развеивается.

1D-макет с сеткой

Хотя добавление display: grid в CSS ничего не меняет,

.container {
  display: grid;
}

Как только мы добавим grid-auto-flow: column, элементы выстроятся в ряд.

И этот миф мы развенчали!

Итак, когда вам на самом деле следует использовать flex или grid? 🤨

CSS grid ориентируется на точное размещение контента. Каждый элемент представляет собой grid ячейку, выстроенную по горизонтали и вертикали. Если вы хотите точно контролировать положение элементов в макете, CSS grid — это то, что вам нужно.

Принимая во внимание, что flexbox фокусируется на потоке контента, а не на его размещении. Ширина (или высота) flex элементов определяется содержимым элемента. Flex элементы увеличиваются и уменьшаются в зависимости от их внутреннего содержимого и доступного места.

С flex-wrap вы могли заметить, что элементы занимают ровно столько места, сколько им нужно.

Это не относится к grid. При добавлении следующего CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

Мы обнаружили, что все элементы имеют одинаковую ширину, независимо от их содержимого. Они также имеют такую ​​же высоту, что и все элементы в определенной строке.

Примеры использования🎬

Флексбокс

Идеальным вариантом использования flexbox будет, когда вы хотите отображать элементы, не занимая равное пространство, например, на панели навигации.

Сетка

grid можно использовать для отображения таких элементов, как карточки, где каждый элемент должен иметь одинаковый интервал.

Его также можно использовать для создания макетов каменной кладки, где элементы расположены в виде grid, но элементы расширяются за пределы одной строки/столбца, что можно сделать с помощью добавление нескольких свойств CSS к дочерним элементам:

.grid-parent .child-2-by-2-tile {
  grid-column: span 2;
  grid-row: span 2;
}

Согласно исследованиям, записывая свои цели ручкой и бумагой, вы повышаете вероятность их достижения на 21%–39%. Ознакомьтесь с этими блокнотами и журналами, чтобы облегчить путь к достижению своей мечты: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Подпишитесь на меня, чтобы получать еженедельные новости в области технологий!

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Загляните на мой Персональный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Подпишитесь на меня в Instagram, чтобы узнать, чем я занимаюсь в последнее время.