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

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

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

Давайте начнем с развенчания распространенного мифа о том, что flex и grid ограничены 1D & 2D макетами.

В качестве базового 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

Идеальный вариант использования 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.

Спасибо за чтение

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

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

Хотите пообщаться? Свяжитесь со мной на LinkedIn

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

Следите за моими блогами, чтобы получать еженедельные свежие новости о Dev

FAQ

Это несколько часто задаваемых вопросов, которые я получаю. Надеюсь, этот раздел FAQ решит ваши проблемы.

1. Я новичок, как мне изучить Front-End Web Dev?
   Посмотрите следующие статьи:

   1. Дорожная карта Front End разработки
   2. Идеи фронт-энд проектов

2. Вы могли бы стать моим наставником?

   Извините, но у меня и так много работы, и у меня нет времени на наставничество.