От автора: больше похоже на мое медленное продвижение в процессе изучения CSS Grid, руководство просто звучит круче. Когда я заканчиваю свой 10-ый CSS Grid pen* (моя 10-я годовщина, если хотите), я думаю, что могла бы также изложить (ха!) некоторые свои мысли. Может быть, кому-то эти заметки пригодятся?
Начало работы
Мне всегда становится боязно перед тем, как сделать первый шаг, попробовать что-то, особенно если это что-то действительно большое. Я думаю, что это иногда случается с начинающими разработчиками (кхе-кхе, не то, чтобы я считала себя разработчиком, кхе-кхе).
Вокруг CSS Grid сейчас столько шумихи (и заслуженно); я продолжаю слышать о том, как это здорово, и в итоге это произвело на меня определенное, пугающее впечатление. Я думал, что это будет действительно сложно реализовать, и просто предполагала, что недостаток опыта в кодировании помешает мне понять или использовать концепции правильно.
Поэтому, когда CSS Grid был выпущен, я даже не смогла заставить себя попробовать его.
До определенного момента, я была слишком взволнована, чтобы попробовать. Но я знала, что единственный способ заставить себя что-то сделать — это просто погрузиться в это и разобраться.
Подобно тому, как вы толкаете ребенка в бассейн, чтобы заставить его научиться плавать. Не делайте этого — это страшно и может травмировать ребенка — но я полагаю, что это приемлемая метафора для интересных проектов кодирования. Итак, вооружившись руководством по CSS Grid, я начала свое путешествие!
1. Хорошо, с чего начать на самом деле
С 3 основных свойств…
display: grid grid-template-columns: 300px 200px; grid-template-rows: repeat(4, 1fr);
Дополнительное свойство grid-gap для зазоров.
grid-gap: 10px;
Если вы зададите трек сетки с помощью этих объявлений, все прямые дочерние элементы будут перемещаться соответственно по порядку. Простой пример — эта карта бинго…
… с таким треком сетки:
display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 100px repeat(5,80px);
Честно говоря, это действительно все. Пока вы размещаете дочерние элементы в правильном порядке, вам больше не нужен CSS, связанный с сеткой. Это мой самый первый эксперимент с CSS Grid, который немного сложнее, чем в примере выше, но он все равно очень прост:
… в нем используется этот трек сетки:
display: grid; grid-template-columns: repeat(9, 100px); grid-template-rows: repeat(4, 100px); grid-gap: 10px;
Дополнительная полезная информация:
repeat(x, y) — это всего лишь более простой способ написания кода. Итак, grid-template-rows: 200px 200px 200px auto; можно записать как grid-template-rows: repeat(3, 200px) auto;.
fr — это новейшая единица. 1fr — это одна часть доступного пространства. Таким образом, если ширина div равна 500px, то repeat(5, 1fr) означает, что 500px будет разделен на 5 равных частей по 100px.
Значения grid-template-rows и grid-template-columns в значительной степени не ограничены*. Вы можете задать grid-template-rows: 200px 100px 200px 100px 300px 250px 150px; и так далее.
* На самом деле это не проверено, но я попробовала следующее:
2. Свойства для дочерних элементов
Далее идут свойства для дочерних элементов. Вы можете контролировать две важные вещи: а) положение и б) размер элементов.
Чтобы получить длинный столбец, в котором находится лавовая лампа, необходимо указать следующие свойства:
grid-row-start: 2; grid-row-end: 3;
… для дочернего элемента.
Это означает, что вы хотите, чтобы элемент занимал строки 2–3. Это также можно переписать так, grid-row: 2 / span 2, чтобы первая часть была строкой, в которой начинается элемент, а вторая часть — это количество ячеек, которые должен занимать элемент. Работает точно так же для колонок!
Попутно другие интересные вещи
Использование grid-auto-flow: dense, которое заставляет дочерние элементы заполнять пробелы, если они подходят им. Простая демо-версия.
Это мое любимое свойство! Вам не нужно тщательно определять размещение для каждого дочернего элемента; очень удобно для элементов порт-фолио или фотогалерей.
Перекрывающиеся дочерние элементы
Я обнаружила эту особенность довольно поздно, что вдохновило мой десятый pen. Вы можете перекрывать элементы и указывать порядок с помощью z-index.
Здесь перекрываются события календаря с использованием z-index.
Сложная сетка треков с помощью grid-templates-areas
Вы можете указать трек сетки, используя имена! Например:
Для родительского элемента задано:
.parent-element { grid-template-columns: 60px 700px 300px; grid-template-rows: auto 70px; grid-template-areas: "title pie-recipe pie-image" "context context pie-image";
}Повторение имени означает, что дочерний элемент будет охватывать эти ячейки. В этом примере элемент с именем context будет занимать две ячейки в колонке и иметь ширину (60px + 700px). Именованный элемент pie-image будет занимать два ряда и иметь высоту (300px + 70px). Вы ‘называете’ дочерние элементы, используя свойство grid-area:
.child-element-for-pie-image { grid-area: pie-image;
}Совет для сложных треков сетки
Чтобы быстрее создавать макеты, я всегда помещаю однотонный фон в каждый дочерний элемент и экспериментирую до тех пор, пока не получу правильный макет. Это помогает при создании сложных треков сетки.
До
После
Отдельное примечание
Отдельное примечание касается того, чтобы вы не пытались делать что-то подобное.
Это очень много работы. Самая крутая вещь в CSS Grid — это гибкость, и мне очень нравится использовать для макетов такие значения, как minmax или auto.
Но чтобы использовать этот подход для того, что я считаю иллюстрацией … скажем, я потратила более 2 часов, пытаясь выровнять вещи правильно и чтобы каждый пиксель находился именно там, где я хочу. Извлеченный урок: дважды подумайте, прежде чем использовать CSS Grid для иллюстраций.
Ладно, если честно, я не все правильно спланировала. Так что я думаю, совет будет такой — составляйте план перед выполнением.
Как вы можете начать сами!
Найдите вдохновение в чем-то и закодируйте это! Многие вещи могут быть преобразованы в эксперимент с CSS Grid.
Вдохновение в ванной комнате
Я имею дело с электронными таблицами каждый день
Но вместо того, чтобы просто говорить, вот список вещей, которые вы можете попробовать:
Просто: шахматная доска, макет комиксов
Сложнее: меню ресторана, этикетки для продуктов питания, этикетки для футболок , макеты журналов, автостоянка.
Сложно: чеки, газеты, панели инструментов, клавиатуры (как инструмент, так и та, на которой вы печатаете)
Не беспокойтесь о вещах в сложном списке; они не обязательно должны быть сложными, они просто содержат компоненты, которые нужно продумать и спланировать при укладке треков сетки.
Я люблю иметь дело с нестандартными сценариями использования в экспериментальных целях и видеть, как эти идеи воплощаются в жизнь … так что да, часто я отдаю свои идеи на аутсорсинг, потому что у меня нет времени, чтобы реализовать их все.
Автор: Olivia Ng
Источник: https://codepen.io
Редакция: Команда webformyself.