В те дни существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было общеизвестно трудно сделать правильно: .
Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и поплавки, и ни один из них не подходил для этой задачи. Технически это было возможно, но потребовались некоторые уловки.
Как только flexbox получил поддержку основных браузеров, этот макет превратился из «святого Грааля» в «фонтанный напиток»; он был повсюду, потому что предлагал отличный пользовательский интерфейс и был доступен для всех разработчиков.
По мере развития Интернета я обнаружил новый желанный макет. Он предлагает фантастический пользовательский интерфейс, особенно для длинного текстового контента, такого как новостные статьи или документация. Но, как и его предшественник, этого было обманчиво трудно достичь; большинство реализаций требуют непонятных хаков или нелогичных уловок.
Недавно я обнаружил элегантное решение этой проблемы с использованием CSS Grid. В этом посте мы узнаем, как это работает!
Это руководство посвящено тому, как я создал макет рабочего стола. Это все равно будет иметь смысл при просмотре на мобильных устройствах, но вы упустите некоторые интерактивные элементы. Если есть возможность, я бы порекомендовал проверить это на компьютере!
Вы когда-нибудь пробовали читать Википедию на очень большом экране? Это выглядит так:
Эти абзацы такие широкие! Википедия вообще не ограничивает ширину контейнера. Это приводит к строкам длиной в сотни символов.
Нашим глазам трудно обойти, когда мы достигаем и линии. Если вы похожи на меня, вы в конечном итоге используете мышь, чтобы помочь:
В дополнение к проблеме переноса строк, просто обычно трудно читать строки текста, которые такие широкие, это утомляет глаз.
Стандартным решением этой проблемы является создание одного столбца фиксированной ширины в центре страницы. Вы видели этот макет повсюду: в онлайн-журналах, документации, новостных сайтах и блогах. Вы смотрите на него прямо сейчас, на этом сайте!
Однако есть усложняющий фактор — не весь контент должен быть ограничен . Мы должны разрешить изображения, видео и пользовательские виджеты чтобы вырваться и заполнить доступную ширину:
Этот сурикат использовался как пример ребенка, который освобождается от ограничений. Фото Шона Пола Киннера.
Обычным термином для такого рода вещей является «полное кровотечение». Это термин, заимствованный из издательского мира; когда что-то печатается без полей, оно распространяется до самого края бумаги.
Это новое требование значительно усложняет задачу. Относительно легко ограничить всех детей, но в CSS действительно нет механизма для выборочного ограничения некоторых детей.
Давайте начнем с конца, с нашего решения :
Эти стили назначаются разметке в следующей форме:
Здесь есть что распаковать, поэтому давайте рассмотрим его шаг за шагом.
Если вы не знакомы с CSS Grid, это может показаться большим количеством случайных символов и ключевых слов. Не бойся! Все будет объяснено.
grid-template-columns — это свойство, которое позволяет нам определять форму нашей сетки. Предоставляя 3 дискретных значения, мы указываем, что нам нужно 3 столбца.
Значения определяют ширину каждого столбца. Первый столбец — 1fr как и последний столбец. Блок fr — это гибкий блок, который заполняет доступное пространство. По принципу он похож на flex-grow ; это соотношение того, сколько свободного пространства должна занимать колонка.
Наша центральная колонка имеет фиксированную ширину. Мы используем помощник min чтобы выбрать любое из меньших значений. На больших экранах он будет занимать 65 ширины. На меньших экранах, где недостаточно места по горизонтали для 65 символов, он ограничен до 100% доступной ширины контейнера.
Вот как это выглядит на практике:
Это есть символ Как мы уже обсуждали, мы хотим ограничить длину нашего текста так, чтобы каждая строка была шириной около 65 символов. Мы можем «оценить» ширину, используя пиксели, но в CSS есть непонятная единица, которая немного упрощает нашу жизнь: ch
ch — это единиц измерения, например px или rem . Он соответствует ширине символа 0 в текущем шрифте для указанного размера шрифта. Вместо обратного проектирования ширины в пикселях мы указываем ширину в символах.
На практике вам все равно придется немного поработать; если ваш шрифт имеет особенно узкий символ 0 например, вам нужно немного преувеличить.
Мы определили сетку из трех столбцов, и теперь она время назначить ему дочерних элементов.
По умолчанию дочерние элементы будут размещены в первой доступной ячейке сетки. Однако мы хотим изменить это поведение по умолчанию; все дочерние элементы должны находиться в центральном столбце, оставив первый и третий столбцы пустыми.
В CSS столбцы индексируются 1, поэтому 2 — это ссылка на средний столбец. .
Звездочка ( * ) — это подстановочный знак; он будет соответствовать элементам всех типов. Мы говорим, что каждый ребенок должен быть отнесен ко второму среднему столбцу. Каждый новый дочерний элемент будет создавать новую строку, например:
Мы видели, как наша сетка может ограничивать элементы всех типов, но что насчет того, когда мы хотим, чтобы ребенок освободился и наполнил доступная ширина?
Вот тут-то и появился этот парень:
Этот специальный .full-bleed класс позволяет конкретному ребенку выбраться из этого столбца, и охватите все 3 столбца. 1/4 — синтаксис начала / конца; мы говорим, что элемент должен начинаться с столбца 1 (включительно) и охватывать весь столбец 4 (исключая).
Хитрость в том, что каждый дочерний элемент становится своей собственной строкой сетки, и каждый дочерний элемент может заполнять как столько, сколько захочет. Большинство элементов всегда будут занимать только центральную колонку, но некоторые будут охватывать все 3.
Конфликтующие стили Возможно, вы заметили, что у детей с вами полный выпуск класс даны конфликтующие значения столбца сетки :
Это работает из-за ; наш класс full-bleed отменяет селектор подстановочных знаков ( * ), потому что он более конкретен. Мы намеренно настраиваем конфликт, так как знаем, что наш класс с полным кровотечением победит.
Прелесть селектора подстановочных знаков в том, что он всегда проигрывает эти битвы, так что это отличный способ для установки значений по умолчанию.
Самое замечательное в этой технике — то, что она очень гибкая.
Иногда вы не хотите, чтобы у ребенка действительно была «полная кровь»; на сверхшироких мониторах он может быть довольно большим. С помощью небольшой настройки мы можем создать вариант псевдо-полного выхода за обрез который ограничивает его ширину до некоторого большого значения:
CSS Grid сверхмощный, и теперь, когда он достигнут широкая поддержка браузера он может решить так много наших проблем!
Я планирую написать гораздо больше о CSS Grid, поэтому не забудьте подписаться на информационный бюллетень, если вы хотите узнать больше. 💖
(Пока оценок нет)
Загрузка...
