Как сделать сетку css

Чтобы создать сетку (grid) на CSS, можно использовать свойства «display: grid» и «grid-template-rows / grid-template-columns». Для начала создадим простую сетку с двумя колонками и двумя строками:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #999;
}

• Свойство «display: grid» задает контейнеру блочный элемент форматирования в виде сетки.
• Свойство «grid-template-rows» определяет размер и количество строк в сетке. В этом случае мы используем функцию repeat(), чтобы создать две строки с равным размером («1fr» означает «fraction» и относится к доле от доступного пространства).
• Свойство «grid-template-columns» определяет размер и количество колонок в сетке.
• Каждый элемент сетки, в данном случае div с классом «grid-item», отображается в ячейке сетки по умолчанию.

Это создаст сетку с двумя строками и двумя колонками, к каждой ячейке которой будет применяться класс «grid-item». Можно изменять количество и размер ячеек, а также использовать другие свойства CSS, такие как «grid-template-areas» и «grid-gap», чтобы создать более продвинутую сетку.