От автора: макет и композиция — одни из самых сложных тем в CSS. Особенно когда нужна адаптивность. Мы часто прибегаем к медиа-запросам. Но добавление множества медиа-запросов для различных контрольных точек может сделать CSS неработоспособным. Однако с помощью добавления сеток мы можем преодолеть это. Они не только делают CSS более простым в обслуживании, но и улучшают взаимодействие с пользователем. Мы можем через CSS обрабатывать доступное пространство. В этой статье я опишу три реализации макета, которые могут улучшить ваш (личный) веб-сайт.
Динамический центрированный макет
Все мы знаем, margin: 0 auto предназначено для центрирования макета. Идеально подходит для страниц статей, правда? Но что, если вы хотите, чтобы такие элементы, как изображения, превышали максимальную ширину статьи? Это можно сделать с помощью отрицательных полей. Но это работает только на больших экранах. На маленьких экранах отрицательные поля могут сломать сайт. Особенно, когда вы применяете на телефоне меньший боковой отступ по сравнению с планшетами. Итак, нам нужно создать набор медиа-запросов, чтобы этот эффект работал должным образом на всех размерах экрана. Но теперь у нас есть крутой эффект, как показано ниже.
Что произойдет, если вы захотите изменить эти сверхширокие элементы? Вы просматриваете несколько медиа-запросов, чтобы определить, применяется ли изменение на разных экранах. Что, если бы мы могли сократить количество медиа-запросов и при этом добиться такого эффекта? Недавно я наткнулся на этот пост от Дэйва Геддеса. Он показывает нам, как добиться этого эффекта с помощью CSS-сеток. Вы создаете сетку из трех столбцов. Центральный столбец — это фактическая область содержимого, а два внешних столбца действуют как отступы, но также создают эффект margin: 0 auto.
article { display: grid; grid-template-columns: minmax(2rem, 1fr) minmax(auto, 65ch) minmax(2rem, 1fr);
} /* Center all children */
article > * { grid-column: 2;
} /* Wider & centered images */
article > img { grid-column: 1 / 4; justify-self: center; width: 100%; max-width: 100ch;
}Отступы по бокам должны отличаться для разных размеров экрана. На небольших экранах вы хотите ограничить пустое пространство, в то время как на больших экранах больше пространства может улучшить визуальное качество. Но с указанным выше решением вам по-прежнему нужны медиа-запросы для использования разных боковых отступов. Вы можете смягчить это, добавив гибкости сайту. Мы можем заменить 2rem на что-то вроде calc(1rem + 1 * var(—ratio)). Таким образом, боковые отступы изменяются автоматически при изменении размера экрана, без медиа-запросов. Теперь у нас есть динамический и удобный макет для статей.
Адаптивная многоколоночная сетка
Кто не знает адаптивный многоколоночный макет? Макет, который меняет количество столбцов в зависимости от размера экрана, как показано выше. Это часто решалось с помощью чего-то вроде системы сеток Bootstrap или собственной реализации. Но это ограничивает вас фиксированным количеством столбцов для каждого размера экрана. Если бы у вас было пять столбцов, это было бы невозможно в системе из двенадцати столбцов. Кроме того, вам необходимо определить для каждого элемента диапазон столбцов на разных размерах экрана.
Если у вас много сеток, CSS или HTML плохо масштабируются. К счастью, в наши дни у нас есть CSS-сетки. В CSS-сетках мы не определяем диапазон столбцов для каждого элемента. Вместо этого мы позволяем браузеру определять количество столбцов на экране. Вы можете получить проиллюстрированный масштабируемый макет с помощью фрагмента кода ниже. Давайте рассмотрим его!
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%;
}Это так называемый шаблон RAM : repeat, auto, minmax. С помощью repeat() мы говорим браузеру, что он должен повторить аргумент. Например, repeat(3, 1fr) может создать макет из трех столбцов одинакового размера, заполняющих весь экран. Но наши элементы почти всегда имеют минимальную ширину. С помощью 1fr мы можем их сломать. С помощью minmax(20rem, 1fr) каждый столбец имеет минимальную ширину 20rem, но расширяется на больших экранах.
Магия начинается с замены фиксированного числа на auto-fit или auto-fill. В обоих вариантах мы позволяем браузеру определять количество доступных столбцов на экране. При использовании auto-fill и minmax(20rem, 1fr) на экране браузера 90rem создается четыре столбца. В этом примере auto-fit создается максимум четыре столбца. Когда в сетке всего два элемента, количество столбцов сокращается до двух. Это дает вам большую гибкость в создании адаптивных макетов без использования медиа-запросов.
Знаете ли вы, что вы можете установить для элементов атрибут grid-column: span 2? При этом они будут охватывать две колонки. Поэтому не все элементы должны быть одинакового размера. Обратной стороной является то, что всегда будет как минимум два столбца, и любые потенциальные пробелы в сетке не заполняются.
Двухсторонние макеты карточек
Вы часто видите большие макеты карточек с изображением и контентом рядом друг с другом, которые занимают большое горизонтальное пространство. Часто они имеют фиксированное соотношение (например, 50% -50%). При уменьшении размер экрана, вы не хотите, чтобы они были рядом. Соотношение также изменилось, чтобы лучше использовать доступное пространство. Высота изображения больше не 50%. Каркасы ниже визуализируют эту концепцию.
Не похоже ли это на знакомую проблему? Что ж, это так. Это почти то же самое, что и описанная мною сетка с автоматическим масштабированием. Есть одно небольшое дополнение. Нам нужно добавить grid-template-rows: auto 1fr к классу grid. Значение auto вмещает вертикальную ориентацию с измененным отношением. Это предполагает, что изображения имеют альбомную ориентацию. Поскольку есть только два дочерних элемента (изображение и контент), CSS-сетки обрабатывают все остальное.
В CSS-сетках определения строк и столбцов игнорируются, когда элементов недостаточно. В приведенном выше примере, когда элементов достаточно только для заполнения первой строки, определение второй строки 1fr игнорируется.
Заключение
CSS-сетки позволяют решать проблемы с адаптивным макетом. Есть способы добиться этого, в том числе без использования медиа-запросов. Но в большинстве случаев им для работы требуется больше CSS, что затрудняет поддержку этих решений. Особенно в сочетании с гибкостью сетки CSS (и flex-box) позволяют создавать веб-сайты, которые соответствуют размеру экрана, и не беспокоиться о контрольных точках. Я имею в виду, они называются точки прерывания не без причины, не так ли?
Автор: Vycke
Источник: https://vycke.dev
Редакция: Команда webformyself.