Skip to main content

Сетка flexbox, grid

Предназначены для создания гибких и адаптивных макетов.

Flexbox​

Flexbox — это одномерная система компоновки, предназначенная для выравнивания элементов по одной оси (горизонтально или вертикально).

Основные концепции Flexbox​

Flexbox работает с двумя основными сущностями:

  1. Flex Container (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство display: flex или display: inline-flex.
  2. Flex Items (элементы) — дочерние элементы внутри flex-контейнера.

Преимущества Flexbox:​

  • Простое создание адаптивных макетов.
  • Легкое выравнивание элементов по горизонтали и вертикали.
  • Гибкость в управлении размерами и порядком элементов.

Когда использовать Flexbox:​

  • Для создания одномерных макетов (например, навигационные панели, карточки, списки).
  • Когда нужно выравнивать элементы внутри контейнера.
  • Для создания адаптивных интерфейсов.

Grid​

Grid — это двумерная система компоновки, позволяющая работать и с колонками, и со строками одновременно.

Основные концепции Grid​

  1. Grid Container (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство display: grid или display: inline-grid.
  2. Grid Items (элементы) — дочерние элементы внутри grid-контейнера.
  3. Grid Lines (линии) — линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы.
  4. Grid Tracks (дорожки) — пространство между двумя соседними линиями (строки или столбцы).
  5. Grid Cells (ячейки) — пересечение строки и столбца (минимальная единица сетки).
  6. Grid Areas (области) — прямоугольные области, состоящие из одной или нескольких ячеек.

Преимущества Grid:​

  • Полный контроль над строками и столбцами.
  • Простое создание сложных макетов.
  • Гибкость в управлении размерами и расположением элементов.

Когда использовать Grid:​

  • Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
  • Когда нужно точно контролировать расположение элементов.
  • Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.

🚀 Источник: DeepSeek