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

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

Чтобы создать сетку с помощью CSS Grid, вам сначала потребуется определить контейнер, в котором будут располагаться элементы сетки. Для этого вы можете использовать CSS-свойство display со значением grid для контейнера.

Пример:

.container {
  display: grid;
}

Затем вы можете определить количество столбцов и строк в сетке, используя свойства grid-template-columns и grid-template-rows. Чтобы указать фиксированный размер столбцов или строк, вы можете использовать единицы измерения, такие как пиксели или проценты. Если вы хотите, чтобы столбцы или строки были автоматического размера, вы можете использовать ключевое слово auto.

Пример:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* три столбца равной ширины */
  grid-template-rows: 100px auto; /* первая строка высотой 100 пикселей, вторая строка автоматического размера */
}

Вы также можете использовать свойства grid-column-gap и grid-row-gap для определения промежутков между столбцами и строками.

Пример:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px auto;
  grid-column-gap: 10px; /* промежуток между столбцами */
  grid-row-gap: 20px; /* промежуток между строками */
}

После определения сетки вы можете указать позицию каждого элемента, используя свойства grid-column и grid-row. С помощью этих свойств вы можете задать, в каком столбце и строке должен находиться элемент, а также сколько столбцов и строк он должен занимать.

Пример:

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

.item {
  grid-column: 1 / 3; /* элемент занимает первый и второй столбцы */
  grid-row: 2; /* элемент находится во второй строке */
}

CSS Grid также обладает другими мощными возможностями, включая возможность создавать автоматические сетки с использованием свойств grid-auto-rows и grid-auto-columns, а также возможность создавать гибкие сетки с использованием свойства grid-template-areas.

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