От автора: использование гибкой природы Интернета предоставляет нам мощные решения для интерфейса, где вместо использования определенных размеров мы задаем элементам разумные границы и позволяем им автоматически заполнять пространство, где это возможно.
Я максимально применяю этот подход в своей работе и создаю утилиты, наподобие этой:
Это полностью адаптивный макет сетки CSS Grid, в котором не используются медиа-запросы.
Как это работает
Прежде всего, давайте посмотрим на код:
.auto-grid { --auto-grid-min-size: 16rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); grid-gap: 1rem;
}CSS Grid невероятно мощен, но обычно подобный тип гибкой утилиты макета должен использовать Flexbox — из-за его гибкости. Причина, по которой мы используем сетку для этой конкретной утилиты, это магия, которая есть в minmax. Данная удобная функция — это то, что позволяет нам фиксировать размеры, чтобы поддерживать нужный уровень контроля.
Приведенный выше CSS размещает элементы сетки с фиксированной минимальной шириной. Затем они расширяются, чтобы заполнить оставшееся доступное пространство, где это возможно, потому что мы используем фракционную единицу (1fr) для значения максимальной ширины. Оставшееся доступное пространство распределяется поровну между элементами внутри .auto-grid, поэтому, используя в качестве максимального значения 1fr для каждого элемента, мы используем x% оставшегося доступного пространства для каждого элемента. Это означает, что если у нас есть 10 элементов, x равно 10% оставшегося места. Вот так мы получаем гибкость и необходимый уровень контроля.
Pro совет: Пользовательское свойство —auto-grid-min-size позволяет контролировать минимальную ширину. Я установил для этого пользовательское свойство, потому что никогда не знаю, где используется этот макет, поэтому, делая минимальную ширину легко настраиваемой, макет можно изменить для работы в определенных контекстах. Это удобно для проектирования систем.
Как мы можем улучшить эту утилиту макета?
Поскольку утилита .auto-grid будет пытаться заполнить оставшееся доступное пространство, полезно либо задать максимальную ширину самого макета, либо обернуть его в общую утилиту .wrapper. Я предпочитаю последний подход, потому что много работаю с системами проектирования / библиотеками компонентов, поэтому я очень неохотно определяю размер конкретного элемента, если только мне это не необходимо.
<div class="wrapper"> <ul class="auto-grid"> <!-- items go here --> </ul> </div>
.wrapper { max-width: 65rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}Пример
Создание отдельной утилиты .wrapper означает, что мы можем использовать ее там, где нам это нужно. Немного полезной переносимости!
Поскольку для .wrapper задано max-width, она также будет поддерживать все окна просмотра без использования медиа-запросов. Отступы обеспечивает зазор, поэтому в крошечных окнах просмотра вы получаете размер зазора с каждой стороны в 1rem, что идеально нам подходит. .wrapper — это утилита адаптивного дизайна.
Прогрессивное улучшение
Поддержка CSS Grid, на момент написания данной статьи составляет 92.33%, поэтому подавляющее большинство браузеров поддерживают ее. Мы можем улучшить наш код, чтобы по умолчанию предоставить для меньшинства пользователей браузеров, не поддерживающих ее, минимальный функциональный опыт.
По моему мнению, минимальный функциональным опытом этого контекста будут расположенные один над другим элементы с некоторыми вертикальными полями между ними:
.auto-grid { --auto-grid-min-size: 16rem;
} .auto-grid > * { max-width: 400px;
} .auto-grid > * + * { margin-top: 1rem;
} @supports (display: grid) { .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); grid-gap: 1rem; } .auto-grid > * { max-width: unset; } .auto-grid > * + * { margin-top: unset; }
}Как мы видим, минимальный функциональный опыт удаляет стиль по умолчанию, используя @supports, который определяет поддержку CSS Grid. Этот пример будет хорошо работать даже в самых старых версиях браузера IE. Вы можете даже использовать float и Flexbox, если вам абсолютно необходим сеточный макет для всех браузеров. Вы также можете использовать Scroll Track Utility.
Использование гибкого характера CSS для создания, а не исправления и разрушения, скорее всего, приведет к тому, что вы напишете более качественный и более понятный код, поэтому поиск самого низкотехнологичного подхода к проблемам совместимости будет только на пользу.
Завершение
Я использую этот фрагмент CSS очень часто, а также в каждом проекте, над которым я работаю, широко используется .wrapper. Надеюсь, этот пост продемонстрировал вам силу современного CSS и то, как мы можем писать очень мало, чтобы достичь многого.
Даже прогрессивно улучшенная версия, которая поддерживает все браузеры, очень компактна. Это намного круче, чем писать хаки и CSS для конкретных браузеров!
Автор: Andy
Источник: https://andy-bell.design
Редакция: Команда webformyself.