Руководство для начинающих с CSS Grid

1656634337 rukovodstvo dlya nachinayushhih s css grid

от Кара Лутон

pBq-UbMkPWA6NssSCsXqaFJpmAIxsMgwu2om
Фото Грега Ракози на Unsplash

Я впервые услышал о CSS Grid в конце 2016 года. Я сидел на одной из первых встреч Tech Ladies®, и один из посетителей вспомнил, что услышал, насколько это замечательно. Перематываем вперед через полтора года, и я наконец копаю глубже в Grid. Как преданный пользователь Flexbox, я могу сказать, что это изменит правила игры.

Самым большим вопросом, который у меня был, когда начал изучать CSS Grid, было: чем Grid отличается от Flexbox? И я узнал, что в общем-то Grid может сделать все что может сделать Flexbox. Некоторые люди считают, что Grid предназначен для многомерных макетов, тогда как Flexbox следует использовать для одномерных макетов. Но Grid отлично подходит и для одномерных макетов – особенно если вы вернетесь позже и решите, что хотите сделать этот макет многомерным.

Настройка сетки CSS

Grid очень легко настроить — для этого требуются только две строки CSS.

HTML

<div class=”wrapper”>  <div class=”item”>1</div>  <div class=”item”>2</div>  <div class=”item”>3</div>  <div class=”item”>4</div>  <div class=”item”>5</div>  <div class=”item”>6</div></div>

CSS

.wrapper {    display: grid;    grid-template-columns: 10rem 10rem 10rem;}

И вуаля! У вас есть сетка. Серьезно это все, что вам нужно. Это очень здорово.

Вы заметите, что в отличие от настройки Flexbox на display: flexдобавив display: grid к вашей обертке не сразу имеет значение. Это происходит потому, что вы четко не определяете сколько столбцов вы хотите иметь в своей сетке. Вы сделаете это из grid-template-columns как я сделал выше. Так что в этом примере я устанавливаю ширину трех столбцов 10 rem каждый.

Wx6aCuxkG9v5RW2lfXqtcx7xK710jszdhC2U
Базовая сетка CSS

Вы можете использовать любое значение при настройке grid-template-columnsно я предлагаю держаться подальше от процентов, если вы не пытаетесь добавить до 100%. Это потому, что вам придется принять свое количество grid-gap (К которому мы немного углубимся), и это может стать немного сложнее.

Явные и неявные треки

Прежде чем говорить о явных и скрытых дорожках, давайте сначала поговорим о том, что такое дорожки. Дорожки – это способ нумерации столбцов и строк. Вместо того, чтобы считать отдельные столбцы и строки отдельно, в CSS Grid вы считаете их по линиям дорожки. Вот сетка, с которой мы начали, я пронумеровал все строки и столбцы дорожек, чтобы вам было легче их видеть.

Lzsu5YPNOxOKmxdGRo1K2fHWC8iCNfjFjKWA
Сетка CSS с пронумерованными линиями столбцов и строк

Вы видите, что мы фактически имеем четыре строчки столбцов и три строчки строк. Это поможет при размещении предметов на сетке.

Краткое примечание: если вы используете Firefox Developer Edition (бета-версия обычного Firefox), он на самом деле имеет несколько отличных инструментов для разработчиков для просмотра номеров дорожек столбцов и строк. Если вы проверите свой элемент оболочки, а затем перейдете на вкладку макета, поставьте флажок для своей оболочки и теперь ваша сетка будет выглядеть так, как показано ниже! Я очень надеюсь, что в будущем Chrome добавит такую ​​функцию проверки. Это очень полезно.

zTYIbSUwg0wmLM23ImHDlbE3KXbnSr-7rZuQ
Инструменты инспектора Firefox Developer Edition

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

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

Добавление Grid-Gap

Подумайте о разрыве сетки как о поле, за исключением того, что оно будет добавлено только между элементами, а не за пределами сетки. Я сталкивался с таким количеством случаев, когда я добавлял маржу к элементам в сетке Flexbox только для того, чтобы перейти к оболочке сетки и установить ту же величину маржи, но отрицательную, чтобы компенсировать маржу, установленную за пределами сетки. К счастью, с CSS Grid вам не придется с этим иметь дело.

Давайте возьмем наш пример CSS выше и добавим немного разрыва сетки.

.wrapper {  display: grid;  grid-template-columns: 10rem 10rem 10rem;  grid-gap: 1rem;}
nzT7VWv1P6QnCa6VMPH-D0qlvcl934z5QI8h
CSS Grid с 1 rem grid-gap

Я использовал свойство сокращения grid-gapно вы можете определить явное значение для столбцов и строк с помощью grid-column-gap и grid-row-gap.

*Примечание. Chrome 66 будет изменен grid-gap к gap и grid-column-gap/grid-row-gap к column-gap/row-gap.

Функция Repeat().

Определение ширины каждого столбца при использовании grid-template-columns с тремя колонками одинаковой ширины достаточно просто. Но это очень много набора текста, если вам нужно больше столбцов. Вот где repeat() поступает функция.

Вот наш пример, который мы использовали из repeat() добавлена ​​функция.

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}

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

Дробные единицы

Дробные единицы, или fr — это новая единица измерения длины CSS, представленная вместе с CSS Grid, и я вижу, как я постоянно ее использую. Скажем, нам нужны три столбца одинаковой ширины. Вместо установки width: calc(100% / 3) на предметах мы можем использовать дробные единицы. Подумайте о дробных единицах как о «свободном пространстве».

Давайте продолжим наш пример, который мы использовали.

.wrapper {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-gap: 1rem;}

Вы заметите, что единственное, что я изменил, это grid-template-columns. Теперь я сообщаю браузеру, что мне нужны три столбца, и что я хочу, чтобы каждый из этих столбцов занимал одну дробную единицу или одно свободное место. Это работает очень подобно Flexbox flex-grow собственность.

1IN8vd78DiJjP6-KMqXEM3iK9oc0A6RsdYzF
Сетка CSS с использованием дробных единиц

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

Вы также не должны устанавливать для всех своих столбцов значение 1fr. Ниже приведен пример, когда я установил для первого и третьего столбцов значение 10 rems, а мой средний столбец – 1fr. Вы также можете установить столбцы на 2fr, 3fr и т.д., и элементы этого столбца будут занимать 2x, 3x (и так далее) больше места.

gTdHQ0Sm6kYAV8PUx9PcgDPvI0oz0bxeU2D0
Сетка CSS только со средним столбцом, установленным на 1fr

Размеры отдельных элементов сетки

Давайте поговорим о размерах отдельных элементов сетки. Вы не можете установить жесткую ширину для отдельных элементов, поскольку мы явно устанавливаем ширину с помощью grid-template-columns. Но что если вы хотите, чтобы пункт пять в нашем примере был шириной нескольких столбцов? Мы можем сделать это с помощью grid-column и span.

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}
.item5 {  grid-column: span 2;}

Вы увидите выше, что мы устанавливаем grid-column пятого пункта должно быть размером в два, что позволит пятому пункту охватывать ширину двух столбцов.

PZKKIczjUcd2HeOw3EzIHTCYp3Z-9csboNjB
Сетка CSS с диапазоном на отдельном элементе

Но что если вы хотите, чтобы пятый пункт занимал три колонки? Вот что произойдет.

DzshGlWqLrUDYAqbFz80hdTzlLqcVzHAyTQJ
Сетка CSS, охватывающая пятый элемент в трех столбцах

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

Есть довольно простое решение, как исправить пустое пространство, оставшееся от пятого элемента, перемещаясь в строке вниз. Его можно использовать независимо от того, настраиваете ли вы элемент на строку или столбец. grid-auto-flow: dense.

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;  grid-auto-flow: dense;}
.item5 {  grid-column: span 3;}

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

Сетка CSS всегда будет размещать элементы, которые должны размещаться в определенном месте первыми – в этом случае, элемент пятый, поскольку он охватывает три столбца. Тогда, если у вас есть grid-auto-flow: dense установлено, он будет искать другие предметы, которые поместятся в пустые пятна на сетке.

e34AFH8TDnMbKaG21HzgjJvqa5msz02C0OD5
CSS Grid с grid-auto-flow: плотный

The grid-auto-flow Свойство само по себе определяет, в каком направлении вам нужно добавить другую строчку или столбец после того, как вы уже определили свои элементы. Строка является типичной. Я не вижу большого случая использования для этого, кроме использования grid-auto-flow: dense.

Размещение элементов сетки

В нашем примере с размером отдельных элементов сетки мы сначала установили пятый пункт grid-column: span 2 , что позволило пятому пункту охватить два столбца. На самом деле, grid-column это сокращение для grid-column-start и grid-column-end. То же касается grid-row так же.

Итак, технически мы планировали выполнить пятый пункт grid-column-start: span 2и grid-column-end: auto. По сути, мы сказали сетке начинать пятый элемент с природного места, но иметь вдвое больший размер.

Давайте снова поработаем с пятым пунктом, и я собираюсь показать вам это с помощью инструментов инспектора Firefox Developer Edition, чтобы вам было проще увидеть, где отслеживается пятый пункт. Я добавил еще несколько элементов сетки.

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}
.item5 {  grid-column-start: 1;  grid-column-end: 3;}

Сетка CSS разместит все элементы перед нашим пятым, остановится, а затем посмотрит, где мы начали и закончили пятый элемент, и разместит его там, где мы сказали. Сокращение этого было бы grid-column: 1 / 3 где 1 – наше начальное значение, а 3 – конечное значение.

C4MNJnfRJUwGoFqKM69a4y2k16-fLP0lCIrL
CSS Grid с использованием grid-column-start и grid-column-end

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

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}
.item5 {  grid-column: span 2 / 4;}
LuGjQJfITo7W4To2qDog3V6qdaFO7DOfvq-N
Сетка CSS с сокращенным свойством grid-column

Если вы хотите, чтобы ваш элемент занимал всю ширину сетки, но не знаете, сколь широка ваша сетка, вы можете установить grid-column: 1 / -1. По сути это значение -1 говорит вашему предмету пройти весь путь до последней дорожки. Если вы сделаете это со строчками, вы заметите, что ваш элемент может не опуститься до конца вашей сетки. Это пойдет только на дно вашего явный, строки не ваши неявные строчки.

Ресурсы

Вот некоторые ресурсы, которые я настоятельно рекомендую для более глубокого погружения в CSS Grid!

  • Руководство Веса Босса из CSS Grid – оно абсолютно бесплатное, и именно здесь я узнал о сетке. Мне нравится его стиль преподавания!
  • CSS Tricks’ Complete Guide to CSS Grid – здесь есть несколько замечательных шпаргалок, когда вы застряли на определенном аспекте Grid.
  • CSS Grid Garden – интересный способ попрактиковаться в том, что вы узнали о CSS Grid. Я рекомендую сделать учебник, прежде чем попробовать это, поскольку это иногда становится немного запутанным.

Спасибо, что прочитали мое руководство по CSS Grid! Просмотрите другие мои статьи, например «Как ответить на ужасный вопрос на собеседовании «Расскажите мне о себе», «Почему вам стоит нанять выпускника Bootcamp» или мою историю о том, как я стал разработчиком.

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

Кора Лутон (@karaluton) | Twitter
Последние твиты Кара Лутон (@karaluton). Front end разработчик + бывший музыкальный пиарщик. Балерина на пенсии…twitter.com

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

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