Как на Grid сделать скроллящуюся строку с размерами вложенных блоков от родительских?

Чтобы создать скроллирующуюся строку на сетке (Grid) с размерами вложенных блоков, вам понадобится комбинация HTML и CSS.

Вот шаги, которые нужно выполнить, чтобы достичь желаемого результата:

  1. Создайте контейнер для сетки, используя элемент <div>. Присвойте этому контейнеру класс или идентификатор для последующей стилизации.
<div class="grid-container"></div>
  1. Определите грид-разметку для контейнера, используя CSS свойство display: grid;. Также вы можете указать необходимые размеры строк и столбцов с помощью функций repeat() или fr.
.grid-container {
  display: grid;
  grid-template-rows: 1fr; /* Высота строки */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ширина блоков */
}
  1. Добавьте элементы внутрь контейнера, которые будут являться блоками или элементами, нуждающимися в скролле. Присвойте им класс или идентификатор для стилизации.
<div class="grid-container">
  <div class="block1"></div>
  <div class="block2"></div>
  <!-- Добавьте больше блоков, если необходимо -->
</div>
  1. Стилизуйте вложенные блоки с помощью CSS, включая их размеры и другие свойства.
.block1 {
  /* Стилизуйте блок 1 */
}

.block2 {
  /* Стилизуйте блок 2 */
}

/* Добавьте стили для других блоков, если необходимо */
  1. Для создания скролла добавьте свойство overflow: auto; для контейнера сетки. Таким образом, если блоки превышают размеры контейнера, появятся полосы прокрутки.
.grid-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  overflow: auto; /* Добавляем скролл */
}

Это основные шаги, которые позволят вам создать скроллирующуюся строку с размерами вложенных блоков от родительских на сетке (Grid). Вы можете дополнить этот код и добавить другие стили, которые вам нужны для достижения желаемого внешнего вида.