Как сделать сетку при помощи Grid?

Для создания сетки при помощи CSS Grid в HTML необходимо выполнить следующие шаги:

1. Создайте контейнер, который будет являться родительским для всех элементов сетки. Например:

<div class="grid-container">
  <!-- Здесь будут располагаться элементы сетки -->
</div>

2. Определите стили для этого контейнера, чтобы он использовал CSS Grid:

.grid-container {
  display: grid;
  /* Допустим, вы хотите создать сетку из трех колонок равной ширины */
  grid-template-columns: repeat(3, 1fr);
  /* Допустим, вы хотите создать сетку из четырех строк с автоматической высотой */
  grid-template-rows: repeat(4, auto);
  /* Добавляем отступы между ячейками */
  gap: 10px;
}

3. Добавьте элементы в контейнер сетки. Каждый элемент будет располагаться в отдельной ячейке сетки в порядке добавления в HTML-коде:

<div class="grid-container">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
  <div>Элемент 4</div>
  <!-- Добавьте столько элементов, сколько необходимо -->
</div>

4. Можно дополнительно стилизовать каждый элемент для управления их расположением в сетке. Например:

.grid-container div {
  /* Растянуть элемент на несколько ячеек в ширину */
  grid-column: span 2;
  /* Установить фиксированную высоту элемента */
  height: 100px;
}

С помощью этих шагов можно легко создать адаптивную и гибкую сетку на вашем веб-сайте, используя CSS Grid.