CSS Grid: Работа с автоматическим переносом элементов

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, можно добиться автоматического переноса элементов на следующую строку при уменьшении ширины окна браузера.