Вывод нескольких элементов в ряд (Grid)

Допустим есть элементы, которые надо вывести в ряд (например по три элемента в строчку).

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

Сделать это можно через свойство display: grid.

.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Через свойство grid-template-columns было задано выводить по три элемента в строчку. Значение «1fr» означает, что ячейка должна занимать 1/3 ширины родителя (если было 4 элемента в ряд, то 1/4 ширины родителя).

Единица «1fr» используется только в гридах. Вместо неё можно использовать другую единицу измерения, например если указать «30%», то каждый элемент будет занимать 30%.

На примере выше элементы выводятся вплотную друг к другу. Чтобы задать отступ, используется свойство gap.

.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* задать отступ */
}

Результат:

Игра для изучения Grid

Игра, в которой надо управлять огородом через grid: cssgridgarden.com/#ru

Похожие страницы

• Flex
• Grid
• Bootstrap