26. Отзывчивые сетки без медиа-запросов

CSS: Отзывчивые сетки без медиа-запросов

В этом уроке мы рассмотрим, как создавать отзывчивые сетки, которые адаптируются к различным размерам экранов без использования медиа-запросов. Мы изучим методы, позволяющие создавать гибкие и адаптивные макеты, которые хорошо выглядят на любых устройствах.

Гибкие сетки с помощью grid-template-columns: repeat() и minmax()

Ключевая идея заключается в использовании функций repeat() и minmax() в свойстве grid-template-columns. repeat() позволяет повторять шаблон колонок, а minmax() задает минимальный и максимальный размер для каждой колонки.

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Магия здесь! */
  grid-gap: 10px;
}

.grid-container > div {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

Объяснение:

• display: grid;: Определяет контейнер как grid-контейнер.
• grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));: Здесь происходит основная работа.
  • repeat(auto-fit, ...): Создает столько колонок, сколько поместится в контейнер. auto-fit означает, что пустые колонки схлопываются до 0, что позволяет элементам занимать все доступное пространство. auto-fill работает похоже, но сохраняет пустые колонки. Разница становится заметна, когда элементов меньше, чем потенциально может поместиться колонок.
  • minmax(200px, 1fr): Каждая колонка будет иметь минимальный размер 200 пикселей и максимальный размер 1fr (одна фракция доступного пространства). Это означает, что колонки будут расширяться, чтобы заполнить пространство, но никогда не будут меньше 200 пикселей.

Пример с auto-fill

Чтобы понять разницу между auto-fit и auto-fill, заменим auto-fit на auto-fill:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

Если элементов будет меньше, чем колонок, которые могут поместиться (исходя из minmax), то auto-fill оставит пустые колонки, а auto-fit схлопнет их.

Жизненный пример

Этот подход широко используется в различных веб-сайтах и фреймворках. Например, он часто применяется для создания галерей изображений, где количество изображений может варьироваться, и нужно, чтобы они аккуратно располагались в ряд, адаптируясь к ширине экрана. Многие UI-библиотеки, такие как Bootstrap и Material UI, используют аналогичные техники для создания отзывчивых layout-ов. В частности, в системах управления контентом (CMS) часто используют такой подход для отображения списка статей или продуктов.

Ключевые моменты

• repeat(auto-fit, minmax(...)) - мощный инструмент для создания отзывчивых сеток без медиа-запросов.
• minmax() позволяет задать минимальный и максимальный размер для колонок.
• auto-fit схлопывает пустые колонки, а auto-fill их сохраняет.
• Этот метод часто используется в галереях изображений, UI-библиотеках и CMS.
• Позволяет создавать адаптивные макеты, которые хорошо выглядят на разных устройствах.

Интерактивный пример