Как начать работу с CSS Grid: подробное руководство

Как начать работу с CSS Grid: подробное руководство

От автора: больше похоже на мое медленное продвижение в процессе изучения CSS Grid, руководство просто звучит круче. Когда я заканчиваю свой 10-ый CSS Grid pen* (моя 10-я годовщина, если хотите), я думаю, что могла бы также изложить (ха!) некоторые свои мысли. Может быть, кому-то эти заметки пригодятся?

Начало работы

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

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

До определенного момента, я была слишком взволнована, чтобы попробовать. Но я знала, что единственный способ заставить себя что-то сделать — это просто погрузиться в это и разобраться.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

1. Хорошо, с чего начать на самом деле

С 3 основных свойств…

Дополнительное свойство grid-gap для зазоров.

Если вы зададите трек сетки с помощью этих объявлений, все прямые дочерние элементы будут перемещаться соответственно по порядку. Простой пример — эта карта бинго…

… с таким треком сетки:

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

… в нем используется этот трек сетки:

Дополнительная полезная информация:

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. Свойства для дочерних элементов

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

Чтобы получить длинный столбец, в котором находится лавовая лампа, необходимо указать следующие свойства:

… для дочернего элемента.

Это означает, что вы хотите, чтобы элемент занимал строки 2–3. Это также можно переписать так, grid-row: 2 / span 2, чтобы первая часть была строкой, в которой начинается элемент, а вторая часть — это количество ячеек, которые должен занимать элемент. Работает точно так же для колонок!

Попутно другие интересные вещи

Использование grid-auto-flow: dense, которое заставляет дочерние элементы заполнять пробелы, если они подходят им. Простая демо-версия.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это мое любимое свойство! Вам не нужно тщательно определять размещение для каждого дочернего элемента; очень удобно для элементов порт-фолио или фотогалерей.

Перекрывающиеся дочерние элементы

Я обнаружила эту особенность довольно поздно, что вдохновило мой десятый pen. Вы можете перекрывать элементы и указывать порядок с помощью z-index.

Здесь перекрываются события календаря с использованием z-index.

Сложная сетка треков с помощью grid-templates-areas

Вы можете указать трек сетки, используя имена! Например:

Для родительского элемента задано:

Повторение имени означает, что дочерний элемент будет охватывать эти ячейки. В этом примере элемент с именем context будет занимать две ячейки в колонке и иметь ширину (60px + 700px). Именованный элемент pie-image будет занимать два ряда и иметь высоту (300px + 70px). Вы ‘называете’ дочерние элементы, используя свойство grid-area:

Совет для сложных треков сетки

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

До

После

Отдельное примечание

Отдельное примечание касается того, чтобы вы не пытались делать что-то подобное.

Это очень много работы. Самая крутая вещь в CSS Grid — это гибкость, и мне очень нравится использовать для макетов такие значения, как minmax или auto.

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

Ладно, если честно, я не все правильно спланировала. Так что я думаю, совет будет такой — составляйте план перед выполнением.

Как вы можете начать сами!

Найдите вдохновение в чем-то и закодируйте это! Многие вещи могут быть преобразованы в эксперимент с CSS Grid.

Вдохновение в ванной комнате

Я имею дело с электронными таблицами каждый день

Но вместо того, чтобы просто говорить, вот список вещей, которые вы можете попробовать:

Просто: шахматная доска, макет комиксов

Сложнее: меню ресторана, этикетки для продуктов питания, этикетки для футболок , макеты журналов, автостоянка.

Сложно: чеки, газеты, панели инструментов, клавиатуры (как инструмент, так и та, на которой вы печатаете)

Не беспокойтесь о вещах в сложном списке; они не обязательно должны быть сложными, они просто содержат компоненты, которые нужно продумать и спланировать при укладке треков сетки.

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

Автор: Olivia Ng

Источник: https://codepen.io

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Руководство по адаптивной верстке

Овладейте версткой с Bootstrap и созданием тем для WordPress!

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree