Как на Grid сделать скроллящуюся строку с размерами вложенных блоков от родительских?
Ссылка скопирована
Приветствую.
Есть довольно простая сетка, но не хватает знаний сделать так, чтобы в одной из строк можно было задать вложенным элементам ширину родительских и так, чтобы она была в одну строку и с прокруткой.
Из такого:
Надо сделать такое:
Подскажите, пожалуйста, реализацию.
Пример кода на Codepen.
Дополнительно:
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Андрей PHP
Ответ
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
VPN
Как правильно настроить vless для Android TV?
1 ответ
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
1 ответ
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
1 ответ
1С-Битрикс
Можно ли быстро сделать зеркало сайта на связке Битрикс+Аспро с другими настройками?
1 ответ
Для создания скроллящей строки на Grid с размерами вложенных блоков от родительских, вам следует применить некоторые CSS свойства к вашим элементам. Вот пример кода на CSS и HTML, который поможет вам решить данную проблему:
HTML:
```html
```
CSS:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr); /* Определяем количество и ширину колонок */
overflow-x: auto; /* Добавляем горизонтальную прокрутку */
}
.grid-item {
border: 1px solid #ccc;
padding: 10px;
}
```
В данном примере мы создаем контейнер с классом "grid-container", который использует Grid Layout для размещения пяти элементов с классом "grid-item" в ряд. При этом мы добавляем горизонтальную прокрутку к контейнеру, чтобы пользователь мог просматривать все элементы.
Кроме того, вы можете настроить размеры вложенных блоков от родительских, используя свойства Grid Layout, такие как grid-column-start, grid-column-end, grid-row-start, grid-row-end и другие.
Надеюсь, данное объяснение поможет вам решить вашу проблему с созданием скроллящей строки на Grid с размерами вложенных блоков от родительских. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!