Как разместить блоки в ряд css

Для того, что бы расположить несколько блочных элементов в линию обычно применяется flexbox. Особенно это актуально когда блоки должны располагаться вдоль одной из осей - только горизонтально или только вертикально. Если требуется сетка, где блоки должны размещаться как на шахматной доске, то правильнее применять grid-модель для распределения контента. Рассмотрим пример.

Исходный HTML файл

<div class="container">
  <div>123</div>
  <div>456</div>
  <div>789</div>
  <div>1011</div>
  <div>1213</div>
</div>

Для начала надо определить (или создать) родительский элемент для всех блочных элементов которые необходимо позиционировать в ряд. В нашем случае это div-элемент с классом container. Затем описать правила, изменить display, и выбрать способ распределения блоков внутри flex-контейнера с помощью justify-content и align-items.

.container {
  display: flex;
  /* крайние блоки прижмуться к краям родительского элемента, 
     остальные равномерно займут пространство между ними. */
  justify-content: space-between;
}

Блоки в ряд ставят через flexbox: задайте родителю display: flex.

<div class="row">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

gap задаёт расстояние между блоками.

Одинаковая ширина

.card {
  flex: 1;
}

Каждый блок займёт равную долю ширины родителя.

Перенос на новую строку

Чтобы блоки переносились на новую строку, когда не помещаются:

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 200px; /* не уже 200px */
}

Через grid

Ровная сетка, например по три блока в ряд:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Адаптивно, без медиазапросов — блоков в ряду столько, сколько помещается:

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Выравнивание

.row {
  display: flex;
  justify-content: space-between; /* по горизонтали */
  align-items: center;            /* по вертикали */
}

Без flex

display: inline-block тоже ставит блоки в ряд, но между ними появляются промежутки от пробелов в HTML. Для новых макетов используйте flexbox или grid.

Если блоки всё равно в столбик

• display: flex задали самим блокам вместо родителя.
• У родителя flex-direction: column.
• У блоков width: 100% — при flex-wrap: wrap каждый займёт целую строку.

Flexbox и grid разбирают в курсе «Профессиональная вёрстка».