Главная » Статьи » Раздвижные ряды в CSS Grid

Раздвижные ряды в CSS Grid

Раздвижные ряды в CSS Grid

От автора: еще один аспект редизайна meyerweb, который я хотел бы рассмотреть — это то, как я использую ряды CSS Grid для большей гибкости макета.

Во-первых, давайте представим макет страницы по умолчанию здесь, на meyerweb. Это выглядит примерно так:

Раздвижные ряды в CSS Grid

Так просто, даже flexbox мог бы сделать это! Но это только если вещи всегда остаются такими простыми. Я знал, что это, вероятно, будет не так, потому что содержимое в этих двух боковых панелях, вероятно, будет изменяться от одной части сайта к другой — и я хотел бы, в некоторых случаях, чтобы части боковой панели располагались вертикально. Вот пример:

Раздвижные ряды в CSS Grid

Это основной макет страниц архива. Посмотрите, как архивы в левой боковой панели совпадают с верхом блока каналов в правой боковой панели? Это работа для Сетки. Я думал об объединении каналов и категорий в одну и ту же ячейку сетки (что сделало бы их частью одного ряда сетки), что означало бы оборачивание их в один div, но я решил, что их разделение дает больше гибкости с точки зрения перестройки содержимого. Я могу, например, назначить, чтобы на мобильных экранах за каналами следовали архивы, а затем категории. Или отменить этот порядок.

Более того, я также хотел иметь возможность размещать вещи вдоль нижней части боковых панелей, внизу под футером, но по-прежнему рядом с колонкой основного контента. Например:

Раздвижные ряды в CSS Grid

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

Но вот важная вещь и действительно смысл этой статьи: я не переписываю структуру строк и назначения ячеек сетки для каждого типа страниц. Для body на каждой странице применяется единый шаблон строки, который использует дизайн Hamonshū. Это:

grid-template-rows: repeat(7,min-content) 1fr repeat(3,min-content);

Общая идея здесь заключается в том, что первые семь строк имеют минимальный размер, необходимый для содержимого внутри этих строк. Это также верно для последних трех строк. А между этими наборами — строка в 1fr, которая занимает остальную часть высоты контейнера сетки, раздвигая два набора.

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

Раздвижные ряды в CSS Grid

Вот CSS Grid для этого:

header {grid-row: 1; grid-column: 1 / -1;}
footer {grid-row: -2; grid-column: 1 / -1;}
main {grid-row: 2; grid-column: 2;}

Таким образом, хэдер заполняет все строки. Содержимое расширяется во втором ряду от его размещения в центральном столбце. Футер заполняет всю последнюю строку, которая указывается с помощью grid-row: -2 (потому что grid-row: -1 выравнивает ее верхнюю часть с нижним краем контейнера сетки). Контента больше нет, поэтому все остальные строки min-content не содержат контента, и их высота равна нулю. И нет никакого оставшегося пространства, чтобы заполнить сверху, так что ряд в 1fr также имеет высоту ноль. Похоже, множество рядов указаны без реальной цели, не так ли?

Но теперь давайте добавим немного содержимого боковой панели в колонки один и три; то есть боковые панели. Например, этот макет:

Раздвижные ряды в CSS Grid

Учитывая эту настройку, мы не можем просто назначить для колонки основного содержимого grid-row: 2 и оставить ее на месте — она должна охватывать ряды. На самом деле, она должна охватывать все, кроме последнего, обеспечивая таким образом, чтобы он доходил до футера. Таким образом, CSS заканчивается так:

header, footer {grid-row: 1; grid-column: 1/-1;}
footer {grid-row: -2;}
main {grid-column: 2; grid-row: 2/-2;}
nav {grid-row: 2; grid-column: 3;}
.archives {grid-row: 3 / span 3;}
.feeds {grid-row: 3; grid-column: 3;}
.categories {grid-row: 4; grid-column: 3;}

И в результате ряды заканчиваются так:

Раздвижные ряды в CSS Grid

Визуализация в виде сетки в веб-инспекторе Firefox.

Первый набор рядов min-content собран в нижней части верха макета, а второй набор опущен вниз. Между ними ряд в 1fr занимает все оставшееся пространство, что и раздвигает два набора рядов min-content.

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

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

grid-template-rows: repeat(7,min-content) 1fr repeat(5,min-content);

Это все. Я просто изменил количество повторений во втором наборе строк. Все существующие страницы будут работать нормально, без изменений макета, без изменений CSS. На тех немногих (в настоящее время гипотетических) страницах, где мне нужно поместить кучу вещей внизу колонки основного контента, я просто подключаю их, используя значения grid-row, положительные или отрицательные. Все просто работает.

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

В заключение, вы, вероятно, задаетесь вопросом: ряд в 1fr действительно необходим , чтобы получить макет, подобный этому? На самом деле нет. Давайте сделаем это вот так:

grid-template-rows: repeat(11,min-content);

В результате получаются строки, которые непосредственно не заняты содержимым (те, которые ранее были свернуты до нулевой высоты), но все еще охватываются содержимым (центральный столбец), разделяя оставшееся пространство, используемое рядом в 1fr. Это приводит к такой ситуации:

Раздвижные ряды в CSS Grid

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

Я, конечно, мог бы оставить это так, и, возможно, было бы чище сделать это. Но что-то в этом подходе не совсем подходит мне; в глубине моего сознания засело щекотливое чувство, которое говорит мне, что в этом есть и обратная сторона. По общему признанию, это мог быть рудиментарный инстинкт Эпохи Float; у меня, несомненно, есть много вещей, которые я до сих пор не изучил. С другой стороны, это может быть что-то, связанное с Сеткой, что я подсознательно чувствую, но еще не полностью осознал. Если я когда-нибудь уловлю это, чтобы суметь сформулировать, я обновлю пост.

Автор: Eric A. Meyer

Источник: https://meyerweb.com

Редакция: Команда webformyself.