24.09.2021
b5d6d60d652347b56018e6dd80bd7c00

Позиционирование перекрывающего содержимого с помощью CSS-сетки

Размещение перекрывающего содержимого с помощью CSS-сетки

От создателя: недавно я экспериментировал с CSS-сеткой и качествами выравнивания для создания макетов компонентов, содержащих несколько перекрывающихся частей. Эти макеты могут быть оформлены с внедрением абсолютного позиционирования и сочетания значений смещения (top, right, bottom, left), отрицательными полями и преобразованиями.

Но с помощью CSS Grid, размещение наложеных элементов могут быть построены с внедрением более логичных, удобочитаемых свойств и значений. Ниже приведены несколько примеров того, как имеют возможность пригодиться свойства сетки.

Расширение изображений в ограниченном размере

В демонстрации есть checkbox, который переключает видимость переполнения, чтоб мы могли видеть, где размеры изображения выходят за пределы контейнера при большей ширине области просмотра.

Вот обыденный hero-раздел с заголовком, перекрывающим изображение. Невзирая на то, что изображение имеет верхнюю границу max-width, при отображении на настольном компьютере оно становится довольно высоким. Из-за этого команда контентной стратегии попросила, чтоб часть соответствующего контента страницы, оставалась видимой в области просмотра в очень возможной степени. Комбинируя технику компоновки и свойство контейнера max-height используя функцию CSS clamp(), мы можем создать что-то, что настраивается на основе доступного места окна просмотра, при этом hero-изображение привязано к центру контейнера.

Откройте этот CodePen и измените размер окна просмотра. В зависимости от размеров изображения высота контейнера возрастает, пока не достигнет максимальной высоты. Обратите внимание, что изображение продолжает расти, оставаясь в центре контейнера. Измените размер области просмотра, и контейнер будет поменяются между значениями нижней и верхней границы, определенными в функции clamp().

До этого чем использовать сетку для стилей макета, я мог бы испытать абсолютное позиционирование на изображении и заголовке, использовать трюк с наполнением соотношения сторон, чтобы создать отзывчивую высоту и сохранить соотношение изображения object-fit. Могло бы получиться что-то вроде этого:

CSS

Может быть, можно еще немного урезать код, но все же нужно сохранить хороший стиль. Управление одним и тем же адаптивным макетом с помощью CSS Grid упростит правила стиля макета, сделав код более читабельным. Поглядите на следующий код:

CSS

place-content:center показывает изображению продолжать расти из середины контейнера. Удалите эту строчку и посмотрите, что, хотя изображение все еще находится в вертикальном центрировании place-items, как только будет достигнута точка max-height, изображение будет прилипать к верхней части блока контейнера и продолжит масштабирование за его нижнюю часть. Установив place-content:end center вы увидите, как изображение выходит за границы контейнера.

Это поведение может показаться концептуально схожим на применение object-fit: cover к изображению в качестве способа стилизации для сохранения его внутреннего соотношения при изменении размера для наполнения размеров всего содержимого. Однако в этом контексте сетки элемент изображения управляет высотой собственного родителя, и при достижении max-height родительского элемента изображение продолжает расширяться, сохраняя свое соотношение, и остается на сто процентов видимым, если отображается родительское переполнение. object-fit можно даже использовать со свойством aspect-ratio, чтоб создать согласованный шаблон соотношения сторон для hero-изображения:

CSS

Перекрытие grid-area

Перейдем к дочерним элементам контейнера, grid-area расположит каждый из их так, чтобы они перекрывали одно и то же место. В этом примере именованная область сетки grid-template-areas делает код более читабельным и отлично работает в качестве шаблона для других макетов перекрытия компонент. При этом можно получить тот же итог, удалив правило шаблона и вместо grid-area:container использовать целые числа:

CSS

Это снижение для grid-row-start, grid-column-start, grid-row-end, и grid-column-end. Так как все наследники в этой демонстрации употребляют одну и ту же область строчки /столбца, для достижения желаемого результата нужно установить только начальные строки.

Внедрение place-self

Другой распространенный шаблон наложения можно узреть на каруселях изображений. Интерактивные элементы нередко размещаются поверх области просмотра карусели. Я расширил первую демонстрацию и поменял статичное hero-изображение каруселью.

Та же история, что и ранее: этот макет может использовать абсолютное размещение и целочисленные значения нескольких свойств, чтоб перемещать и тянуть элементы вокруг их родительского контейнера. Заместо этого мы повторно используем наборы правил макета сетки из предшествующей демонстрации. После применения он выглядит так, как и следовало ждать: все дочерние элементы центрируются внутри контейнера, перекрывая друг друга.

Размещение перекрывающего содержимого с помощью CSS-сетки

С объявлением в контейнере place-items:center все его прямые дочерние элементы будут перекрывать друг друга

Последующим шагом является установка значений выравнивания для отдельных частей. Свойство-сокращение place-self для align-self и justify-self обеспечивает четкий контроль над положением элемента внутри контейнера. Вот и все стили макета:

CSS

Есть только одна маленькая проблема: индикаторы заголовка и карусели растягиваются наружу, когда изображение превышает размеры контейнера.

Чтоб правильно содержать эти элементы в родительском элементе, значение grid-template-row должно составлять 100% контейнера, установленное тут как одна дробная единица.

CSS

Для этой демонстрации я опирался на падение grid-template (которую мы увидим позже в этой статье еще раз).

CSS

После этого маленького обновления элементы наложения остаются в родительском контейнере, даже если изображения карусели выходят за границы карусели.

Выравнивание grid-template-areas

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

Для первой итерации объявляется именованная область шаблона для наложения дочерних частей на пространство родительских элементов, как и в прошлых демонстрациях:

CSS

Изображение и полупрозрачное наложение сейчас покрывают область блока, но правила стиля также растягивают другие элементы по всему месту. Похоже, сейчас подходящее время для того, чтоб добавить к этим элементам магию выравнивания place-self!

CSS

Смотрится отлично! Каждый элемент размещается в собственных определенных местах на изображении, как задумано. Ну, практически. В нижней части, где расположены слоган и кнопки действий, есть незначительный нюанс. Наведите указатель мыши на изображение, чтоб открыть слоган. Это может хорошо смотреться с короткой строкой текста на экране рабочего стола, но если слоган станет длиннее (либо поля в окне просмотра уменьшатся), он в конечном итоге выйдет за кнопки действий.

Размещение перекрывающего содержимого с помощью CSS-сетки

Обратите внимание, как слоган в первом столбце во втором ряду перекрывает кнопки действий

Чтоб избавится от этого, в grid-template-areas будем использовать именованные области для слогана и действий.

CSS

Это также можно сочетать с сокращением grid-template. Значения столбца определяются после косой черты, к примеру:

CSS

Потом, grid-area преобразуется в integer и ключевое слово box будет удалено.

CSS

Все должно смотреться так, как было раньше. Теперь последний штришок. Устанавливаем соответствующие значения grid-area для главных слова tagline и actions:

CSS

vТеперь, при наведении курсора на карточки в демонстрации, слоган переносится на несколько строк, когда текст становится очень длинным, вместо того, чтобы проходить мимо кнопок действий, как это было ранее.

Именованные линии сетки

Оглядываясь обратно на первую итерацию этого кода, мне очень понравилось, что по умолчанию для grid-area было установлено ключевое слово box. Есть метод вернуть это.

Я собираюсь добавить в шаблон несколько именованных линий сетки. В приведенном ниже правиле grid-template 1-ая строка определяет именованные области шаблона, которые также представляют строчку. После косой черты указаны явные размеры столбцов (перенесены в новейшую строку для удобства чтения). Пользовательские идентификаторы [box-start] и [box-end] представляют область box.

CSS

Передача имени с –start и –end в скобках определяет область для этого имени. Это имя, известное как пользовательский идентификатор, может быть хоть каким, кроме слов из спецификации CSS, которых следует избегать.

Значения логического размещения

Одна из вправду интересных частей для наблюдения в последнем примере — внедрение логических значений, таких как start и end, для размещения частей. Если изменить значения direction или writing-mode, то элементы будут переставлены подходящим образом.

Когда в раскрывающемся перечне выбрано направление «справа налево», начальная и конечная позиции инлайн изменяются местами. Этот макет готов для работы с такими языками, как арабский либо иврит, которые читаются справа налево, без необходимости переопределять какой-нибудь из существующих CSS.

Заключение

Я надеюсь, что вам приглянулись эти демонстрации и что они предоставляют некие новые идеи для макетов ваших собственных проектов — я собрал коллекцию примеров, которые вы сможете посмотреть на CodePen. В спецификации CSS Grid заложена неописуемая мощь. Найдите минутку, чтобы поразмышлять о использовании float и clearfix для простого дизайна сетки, а затем вернитесь в наши деньки и взгляните на великолепный макет и характеристики отображения сегодняшнего CSS. Сделать так, чтоб эти вещи работали хорошо — сложная задача, поэтому давайте аплодируем членам рабочей группы CSS. Интернет продолжает развиваться, и рабочая группа CSS продолжает делать его увлекательным местом для творчества.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *