Как сделать блоки в линию css

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

1. Используя свойство display с значение inline-block:

.container {
  font-size:0; /*чтобы убрать пробелы между блоками*/
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: red;
  font-size: 16px;
}

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

2. Используя свойство display flex:

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: blue;
}

Здесь контейнеру устанавливается свойство display: flex, которое делает его контейнером «гибкого» расположения. Это означает, что любые дочерние элементы автоматически выравниваются другим способом. Элементы в контейнере будут расположены в строчку друг за другом.

Оба подхода позволяют создавать линию блоков, которая может быть использована для создания навигации, футеров, галерей изображений и т.д.