Как расположить блоки в строку CSS

Чтобы расположить блоки в строку (горизонтально), нужно использовать свойство display с значениями inline-block или inline-flex.

Способ 1: Использование display: inline-block

.block {
  display: inline-block;
}

В этом примере мы используем свойство display: inline-block для каждого блока. Это приведет к тому, что все блоки будут расположены в строку.

Способ 2: Использование display: inline-flex

.container {
  display: inline-flex;
}

.block {
  display: inline-flex;
}

В этом примере мы используем свойство display: inline-flex в контейнере и в каждом блоке. Таким образом, все блоки будут расположены в строку с использованием гибкой модели блоков.

Способ 3: Использование float: left

.container {
  overflow: auto;
}

.block {
  float: left;
}

В этом примере мы используем свойство float: left для каждого блока и задаем overflow: auto контейнеру, чтобы принять все элементы с «влом». Это приведет к тому, что блоки будут выравниваться друг за другом в строке.

Способ 4: Использование display: grid

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

С помощью CSS Grid можно создать удобную и адаптивную верстку с блоками, которые располагаются в строку. Мы используем свойство display: grid в контейнере чтобы применить гибкий контейнер, и затем базовые стили grid-template-columns для определения размеров блоков. Используя repeat(auto-fit, minmax(200px, 1fr)), мы указываем произвольное количество элементов в строке, которые могут изменять свой размер до значения минимум 200px и максимум 1fr.

Каждый из этих способов может быть лучше, чем другой, в зависимости от контекста вашего сайта и желаемого дизайна.