21. minmax(), auto-fit, auto-fill

CSS: minmax(), auto-fit, auto-fill - Создаем адаптивные сетки

Иллюстрация к уроку В этом уроке мы изучим мощные инструменты CSS Grid Layout: функции minmax(), а также ключевые слова auto-fit и auto-fill. Они позволяют создавать гибкие и адаптивные сетки, автоматически подстраивающиеся под размеры экрана и контента.

Функция minmax()

Функция minmax() определяет диапазон размеров для столбца или строки в CSS Grid. Она принимает два аргумента: минимальный и максимальный размер. Синтаксис: minmax(min, max).

.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr; /* Первый столбец от 100px до 300px, второй занимает оставшееся пространство */
}

В этом примере первый столбец будет занимать от 100px (минимальный размер) до 300px (максимальный размер). Если контент требует больше места, чем 300px, столбец не будет расширяться. Второй столбец использует 1fr и займет все оставшееся свободное пространство.

Ключевые слова auto-fit и auto-fill

auto-fit и auto-fill используются с функцией repeat() для автоматического создания столбцов или строк в CSS Grid. Они работают схожим образом, но с одним важным отличием:

auto-fit: Сжимает пустые столбцы/строки до минимального размера (обычно 0), если в них нет контента.
auto-fill: Всегда создает указанное количество столбцов/строк, даже если они пустые.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Создает столбцы, каждый от 200px, занимающие всю ширину. Пустые столбцы сжимаются */
}

.grid-container-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Создает столбцы, каждый от 200px, занимающие всю ширину. Пустые столбцы сохраняют ширину */
}

В примере с auto-fit, если в сетке недостаточно контента, чтобы заполнить все столбцы, пустые столбцы будут сжаты. В примере с auto-fill, даже если контента недостаточно, столбцы будут созданы и займут место, но будут пустыми. 1fr означает, что столбцы будут равномерно распределять доступное пространство.

Практический пример

<!DOCTYPE html>
<html>
<head>
<title>auto-fit/auto-fill пример</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>auto-fit пример</h1>

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

</body>
</html>

В этом примере, auto-fit создает столько столбцов, сколько поместится в контейнер, при этом каждый столбец имеет минимальную ширину 200px. Если ширина экрана уменьшается, количество столбцов автоматически уменьшается, чтобы контент не переполнялся.

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

Многие современные веб-сайты и фреймворки используют minmax(), auto-fit и auto-fill для создания адаптивных макетов. Например, Bootstrap и Materialize CSS активно используют эти техники для создания гибких сеток. Интернет-магазины, блоги и новостные порталы часто применяют их для отображения товаров, статей или новостей в удобном формате, который хорошо выглядит на разных устройствах.

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

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

minmax(min, max) позволяет задать минимальный и максимальный размер для столбца или строки.
auto-fit сжимает пустые столбцы/строки до минимального размера.
auto-fill создает столбцы/строки, даже если они пустые.
Используйте auto-fit и auto-fill с repeat() для создания адаптивных сеток.
Эти инструменты значительно упрощают создание адаптивных макетов без сложных медиа-запросов.