Популярно, доступно, полезно

CSS Grid Layout — лучшие практики. Часть 1


Вступление

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

Вопрос в последнее время все более набирающий популярность у людей, использующих CSS Grid Layout в своих рабочих проектах — «Каковы наилучшие практические методы?». Короткий ответ на этот вопрос заключается в пользовании макетом так, как определено в спецификации. Определенные части спецификации, которых вы решили придерживаться, и как вы объединяете CSS Grid с другими способами создания макетов (такими как Flexbox) сводится к тому, что подходит для шаблонов, которые вы пытаетесь реализовать, и к тому, как вы и ваша команда хотите работать.

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

Исследование

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

Доступность

Если когда и стоит придерживаться какой-либо части спецификации Grid, то это когда вы делаете что-то, что может привести к переупорядочеванию контента:

«Разработчики должны использовать свойство order c Flex layout( у flex items) и свойства размещения CSS Grid (grid-row-start, grid-row-end, grid-column-start, grid-column-end) только для визуального, а не логического изменения порядка контента. Таблицы стилей, которые используют эти функции для логического переупорядочивания не подходят»

Спецификация Grid: переупорядочение и доступность

Хотя эта проблема актуальна не только для грида, его способность легко переупорядочивать контент в двух измерениях затрудняет выполнение этой рекомендации. Однако, если вы используете метод, который разрешает переупорядочивание контента — будь то Grid, Flexbox или даже абсолютное позиционирование — вам нужно следить, чтобы визуальное представление не теряло связь с структурой контента в документе. Скринридеры (и люди, перемещающиеся по документу с использованием только клавиатуры) будут следовать порядку элементов в структуре документа.

Места, где вам нужно быть особенно осторожными — это свойство flex-direction для изменения порядка в Flexbox; свойство order в флексбокс(Flexbox) или гриде; любое размещение элементов CSS Grid любым методом, если он изменяет логический порядок элементов в документе; и режим плотной упаковки grid-auto-flow

Дополнительные сведения об этой проблеме можно найти на следующих ресурсах:

Какие методы позиционирования CSS Grid следует применять?

«С таким большим выбором в гриде было сложно придерживаться какого-то одного метода написания (например, именовать Grid Lines или нет, grid-template-areas, fallbacks(запасной вариант), media queries(медиа-запросы)), чтобы он мог поддерживаться целой командой разработчиков»

Мишель Баркер

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

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

Какой CSS Grid’ом мне следует пользоваться явным или неявным?

Грид, который вы определяете с помощью grid-template-columns и grid-template-rows, называется «явный»(Explicit). Он позволяет именовать строки, а также дает возможность ссылаться на последнюю строку через -1. Его следует выбирать, когда у вас есть полностью готовый макет, и вы точно знаете, где должны находиться строки вашего css grid, и размер track’ов.

Я использую «неявный»(Implicit) грид чаще всего для строчных треков (row track). Если я хочу просто определить столбцы, то после этого строки будут автоматически выровнены и будут расти, пока не охватят контент. Вы можете в какой-то мере управлять неявным гридом с помощью свойств grid-auto-columns и grid-auto-rows, однако параметров для настройки останется меньше, чем если бы все было явно указано.

Необходимо понять, знаете ли вы точное количество контента, и, следовательно, количество строк и столбцов – тогда следует остановить свой выбор на явном гриде. Если заранее не знаете количество контента, но просто хотите, чтобы строки или столбцы были созданы для хранения того, что есть, вам следует использовать неявный грид.

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

  • Трек высотой не менее 200 пикселей, но расширяющийся, чтобы сделать контент выше
  • Трек, с фиксированной высотой 400 пикселей
  • Трек высотой не менее 300 пикселей (но расширяемый)

Любое дальнейшее содержимое войдет в строку, созданную в неявном CSS Grid, и свойством grid-auto-rows я делаю эти треки высотой не менее 300 пикселей, и максимальное размер в режим авто.

.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: minmax(200px auto) 400px minmax(300px, auto);
grid-auto-rows: minmax(300px, auto);
grid-gap: 20px;
}

Гибкий CSS Grid с гибким количеством колонок

Используя repeat() нотацию, autofill и minmax, вы можете создать шаблон с таким количеством треков, которое поместится в контейнер, тем самым в некоторой степени устраняя необходимость в медиа-запросах. Описание этой техники можно найти в этом видео-уроке, также она продемонстрирована вместе с аналогичными идеями в моей недавней статье «Применение медиа-запросов для адаптивного дизайна в 2018 году».

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

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

Какие единицы измерения размера трека следует использовать?

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

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

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}

Первый столбец шире, поскольку css grid присвоил ему больше места

Чтобы заставить единицы fr распределять все пространство в контейнере сетки, вам нужно дать ему минимальный размер 0 с помощью minmax ().

grid {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
grid-gap: 20px;
}

Установку минимума 0 может вызвать переполнение

Таким образом, вы можете использовать fr в любом из этих сценариев: в тех местах, где вы хотите, чтобы распределение пространства происходило автоматически (поведение по умолчанию) и тех, где вы хотите равного распределения. Я бы указывала единицы fr до тех пор, пока результат вас устраивает и после уже прибегала бы к фиксированным значениям ширины треков и зазоров между ячейками. Единственный раз, когда я пользовалась процентом это когда добавляла компоненты сетки в существующий макет, который был создан по другим принципам компоновки. Если я хочу расположить мои компоненты на основе грида на float- макете или flex- макете, размеры которого указаны в процентах , то необходимо чтобы у всех элементов был один и тот же способ указания размеров.

Продолжение в статье CSS Grid Layout — лучшие практики. Часть 2

Перевод статьи «Best Practices With CSS Grid Layout»

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

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