CSS Grid является мощным инструментом для создания сложных макетов веб-страниц. Однако часто возникает вопрос о том, как сделать так, чтобы элементы внутри сетки автоматически переносились на следующую строку без использования медиазапросов.
Разработка на Java — востребованное направление, такие специалисты будут нужны на рынке еще долго. На курсе «Java-разработчик» от Skypro освоить профессию можно с нуля за 11 месяцев, даже если вы гуманитарий и ничего не знаете об IT. Программа составлена от простого к сложному и адаптирована для новичков. Преподаватели — практикующие специалисты из крупных компаний: «Сбер», «Самокат» и других.
Обычная проблема
Допустим, есть неопределенное количество элементов, которые должны быть размещены в сетке. При использовании Flexbox для решения этой задачи могут возникнуть сложности с надежным расположением элементов.
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}
В данном примере сетка создана с четырьмя колонками фиксированной ширины, и элементы, помещенные в сетку, заполняют ее по горизонтали. Однако когда ширина окна браузера становится меньше общей ширины сетки, элементы не переносятся на следующую строку.
Решение проблемы
Для решения этой проблемы можно использовать свойство grid-template-columns с функцией repeat(). Это позволит задать количество колонок и их ширины, и при изменении размера окна браузера элементы будут переноситься на следующую строку.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
В данном случае, repeat(auto-fill, minmax(186px, 1fr)) создает столько колонок шириной в 186px, сколько влезет в ряд. Если ширина окна браузера становится меньше, чем общая ширина колонок, элементы автоматически переносятся на следующую строку.
Освойте Java на курсе онлайн-университета Skypro. Учебе нужно будет уделять всего 10 часов в неделю: сможете совмещать с работой и личными делами. Вас ждут 440 часов теории и практики, мастер-классы с реальными рабочими задачами, опытные преподаватели, кураторы и наставники. За время обучения сделаете два полноценных проекта для портфолио и множество домашних заданий, чтобы отработать навыки.
Заключение
CSS Grid предоставляет гибкие возможности для создания сложных макетов без использования медиазапросов. Используя функцию repeat() в свойстве grid-template-columns, можно добиться автоматического переноса элементов на следующую строку при уменьшении ширины окна браузера.
Добавить комментарий