Для расположения div в ряд с переносом строк вам понадобится применить свойство CSS flexbox или grid. Оба метода позволяют легко управлять расположением элементов на странице и манипулировать переносом строк.
1. Flexbox:
Для использования flexbox вы должны установить родительскому контейнеру свойство display: flex. После этого его дочерние элементы будут автоматически располагаться в ряд.
.container {
display: flex;
flex-wrap: wrap;
}
Здесь flex-wrap: wrap указывает, что элементы должны переноситься на новую строку при нехватке места.
2. Grid:
Для использования grid вам потребуется задать родительскому контейнеру свойство display: grid. Затем настройте количество столбцов, которые вы хотите видеть, при помощи свойства grid-template-columns.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
Здесь grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) указывает на создание гибкой сетки, которая автоматически сжимается и раздвигается в зависимости от доступного пространства.
В обоих случаях к контейнерам можно применить другие свойства для управления пространством между элементами, выравниванием и так далее. Например, justify-content и align-items для flexbox или justify-items и align-items для grid.
Ниже приведен пример HTML-разметки для использования flexbox или grid:
<div class="container"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> </div>
Дополнительно, вы можете использовать CSS медиа-запросы для изменения поведения расположения элементов на различных экранах и разрешениях. Это позволяет лучше контролировать перенос строк и адаптировать макет в зависимости от размера экрана пользователя.