Как сделать на гридах?

Для того чтобы сделать на гридах, вы можете использовать CSS свойство grid-template-columns для определения ширины колонок и grid-gap для задания промежутков между ними.

Пример использования гридов в CSS:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* Задаем три равные колонки */
  grid-gap: 10px; /* Задаем промежуток между колонками */
}

Здесь .grid-container - это класс вашего контейнера, который вы хотите стилизовать с помощью гридов. В данном примере у нас три равные колонки и промежуток в 10px между ними.

Если вам нужно задать различные ширины для каждой колонки, вы можете использовать конкретные значения в grid-template-columns:

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 1fr; /* Первая колонка 100px, вторая 200px, третья занимает оставшееся пространство */
  grid-gap: 10px; /* Задаем промежуток между колонками */
}

В данном примере первая колонка будет иметь ширину 100px, вторая - 200px, а третья будет занимать оставшееся пространство.

Вы также можете использовать grid-template-rows для определения высоты строк в гридах.

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