Какие есть способы расположить элементы рядом (layout techniques)?

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

Flexbox

Flexbox (Flexible Box Layout) предназначен для одномерных раскладок — выстраивания элементов в ряд (row) или колонку (column). Он даёт полный контроль над выравниванием, порядком и распределением свободного пространства между элементами. Это самый популярный и рекомендуемый способ для большинства компонентов интерфейса, таких как навигационные панели, карточки в ряду или центрирование содержимого.

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

CSS Grid

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

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три колонки разной ширины */
  gap: 20px; /* Отступы между элементами */
}

Inline-Block

Свойство display: inline-block заставляет элемент вести себя как строчный (располагается в строке), но при этом позволяет задавать ему ширину, высоту и отступы, как блочному. Главный недостаток — чувствительность к пробелам в HTML-коде, что может создавать нежелательные отступы между элементами.

.item {
  display: inline-block;
  width: 30%;
  vertical-align: top; /* Важно для выравнивания */
}

Float (Устаревший метод)

Изначально float создавался для обтекания текстом изображений. Из-за способности вырывать элементы из потока его долгое время использовали для построения макетов, но это приводило к сложностям с очисткой потока (clearfix) и хрупкости вёрстки. В современных проектах для макетов его использовать не следует.

Вывод: Для создания гибких и поддерживаемых интерфейсов используйте Flexbox для линейных компонентов и CSS Grid для сложных сеток. Inline-block можно применять в простых микро-композициях, а float — только для его изначальной цели (обтекание медиа-контента).