Web Analytics Made Easy - StatCounter
Главная Блог Преодолевая CSS Grid Layout

Преодолевая CSS Grid Layout

Преодолевая CSS Grid Layout

Введение

Некоторое время назад я поделился простой техникой, позволяющей некоторым элементам заполнять всю ширину области просмотра из контейнера фиксированной ширины:

.u-containProse {
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
}
.u-release {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

Каким бы лаконичным ни был этот метод, у него было одно большое, глупое предостережение : на некоторых платформах вы бы увидели горизонтальную полосу прокрутки, если не установите для overflow-x значение hidden на элементе body.

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

Наша цель

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

Мы хотим ограничить ширину прозаического контента, чтобы повысить читабельность.

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

Если мы сделаем набросок, то увидим, что на самом деле мы ищем не столько контейнер с фиксированной шириной с полями ... это скорее макет с тремя столбцами, с основным столбцом, окруженным двумя желобами.

Большая часть контента будет заполнять только среднюю часть, но наш супер-визуальный контент будет охватывать все три. Имея это в виду, пришло время написать немного CSS! Колонка Как ты видишь их

Давайте начнем со стилизации нашего содержащего элемента, который обернет содержимое статьи

.Prose {
    display: grid;
    grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];
}

Здесь мы определили три столбца. Первый и последний - наши желоба с минимальным размером 1em но способные растягиваться, чтобы заполнить одну единицу доступного пространства. Между ними находится наш основной столбец контента, который может растягиваться до максимальной ширины 40em .

Мы также присвоили имена (в скобках) разделительным линиям между столбцами . Это совершенно необязательно, но они облегчат чтение, запись и поддержку остальных наших стилей.

Далее мы инструктируем все дочерние элементы Prose аккуратно занимать наш main столбец:

.Prose > * { grid-column: main; }

И наконец, мы создаем класс для элементов, которые мы хотим охватить на всю ширину контейнера:

.Prose-splash { grid-column: full; }

Вот и все! Вот конечный результат, overflow-x или отрицательные поля не требуются:

Но это не все…

Клёвые новые трюки Поскольку элементы полной ширины основаны на их контейнере, а не на области просмотра, этот метод отлично подходит для асимметричных макетов:

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

Мы также можем рассмотреть возможность использования пространства водосточного желоба новыми способами, которые ранее требовали гораздо большего количества взлома:

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

display: grid.

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

*:not()

Эти предостережения могут стать препятствием для многих, но я предсказываю, что подобные методы станут более привлекательными, поскольку CSS Grid Layout становится все более распространенным. Кажется естественным для нашего контента расширить состав наших интерфейсов. Особая благодарность Эрику Юнгу за его демонстрационную помощь и технический обзор этой статьи.

Автор Тайлер Стика, 11 мая 2017 г.

источник фото