Как это сделать в grid?

Для создания сетки веб-страниц с использованием CSS Grid, вам следует следовать нескольким шагам:

1. Определите контейнер сетки, установив для него свойство display: grid. Это можно сделать с помощью следующего CSS кода:

.grid-container {
  display: grid;
}

2. Определите количество столбцов и строки в сетке с помощью свойств grid-template-columns и grid-template-rows. Например, чтобы создать сетку с тремя столбцами и двумя строками, используйте следующий CSS код:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
}

3. Разместите элементы в нужные им ячейки с помощью свойства grid-column и grid-row. Например, чтобы разместить элемент во второй столбец и первой строке, используйте следующий CSS код:

.grid-item {
  grid-column: 2;
  grid-row: 1;
}

4. Для создания отступов между элементами в сетке используйте свойства grid-column-gap и grid-row-gap. Например, чтобы установить отступы в 10 пикселей между столбцами и строками, используйте следующий CSS код:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

5. При необходимости, вы также можете использовать свойство grid-gap для установки одновременно отступов между столбцами и строками. Например:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
}

Это основные шаги для создания сетки веб-страниц с использованием CSS Grid. Не забудьте поддерживаемость браузеров и при необходимости использовать вендорные префиксы для старых версий браузеров.