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

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

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

1. Создайте контейнер для сетки, используя элемент <div>. Присвойте этому контейнеру класс или идентификатор для последующей стилизации.

<div class="grid-container"></div>

2. Определите грид-разметку для контейнера, используя CSS свойство display: grid;. Также вы можете указать необходимые размеры строк и столбцов с помощью функций repeat() или fr.

.grid-container {
  display: grid;
  grid-template-rows: 1fr; /* Высота строки */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ширина блоков */
}

3. Добавьте элементы внутрь контейнера, которые будут являться блоками или элементами, нуждающимися в скролле. Присвойте им класс или идентификатор для стилизации.

<div class="grid-container">
  <div class="block1"></div>
  <div class="block2"></div>
  <!-- Добавьте больше блоков, если необходимо -->
</div>

4. Стилизуйте вложенные блоки с помощью CSS, включая их размеры и другие свойства.

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

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

/* Добавьте стили для других блоков, если необходимо */

5. Для создания скролла добавьте свойство overflow: auto; для контейнера сетки. Таким образом, если блоки превышают размеры контейнера, появятся полосы прокрутки.

.grid-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  overflow: auto; /* Добавляем скролл */
}

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