Сравнение Flexbox и CSS Grid

Flexbox и CSS Grid — это два мощных инструмента в CSS, которые используются для создания гибких и адаптивных макетов. Оба метода предназначены для управления расположением элементов на странице, но их подходы и возможности различаются.

Flexbox

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

Особенности Flexbox

• Работает по одному измерению: либо по горизонтали, либо по вертикали.
• Элементы могут изменять свою величину, чтобы заполнять доступное пространство.
• Удобно для выравнивания элементов по центру, распределения пространства между ними, а также для адаптивных макетов.

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

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* Распределение элементов по горизонтали */
  align-items: center; /* Выравнивание элементов по вертикали */
}

.item {
  flex: 1; /* Каждый элемент занимает равное пространство */
}

CSS Grid

CSS Grid предназначен для создания двумерных макетов, где элементы располагаются в двух направлениях (горизонтально и вертикально).

Особенности CSS Grid

• Работает по двум осям: горизонтальной и вертикальной.
• Позволяет создавать сложные сетки с явным контролем за размещением элементов в ячейках.
• Позволяет легко создавать макеты с фиксированными и адаптивными размерами.

Пример использования CSS Grid

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три столбца с разной шириной */
  grid-template-rows: 100px auto; /* Два ряда: первый фиксированного размера, второй — адаптивного */
  gap: 10px; /* Пробел между ячейками */
}

.item {
  background-color: lightblue;
}

Основные различия между Flexbox и CSS Grid