Полное руководство по CSS Grid (Grid шпаргалка)

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

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

Хочу так же отметить, что в большей мере я использую scss, при создании css кода, потому советую многим так же начать его изучать.

Начало работы с CSS Grid

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

 пример контейнеров и элементов в grid

Собственно, кто уже давно верстает с html понимает, что понятия блочной верстки абсолютно переплетаются с этой темой.

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

Свойства для элементов CSS Grid

grid-column-start, grid-column-end,

grid-row-start, grid-row-end

grid-column, grid-row

Выше приведенный пример показывает четко, как работают набор свойств grid-column и grid-row. Сами свойства работают достаточно интересно, ведь обозначаем мы не сами клетки которые мы хотим зацепить, а линии с которых хотим начать и закончить выдиление.

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

.item {
  grid-row-start: 1; //начинаем с первой строки
  grid-column-start: 1; // так же начинаем с первой колонки
  grid-column-end: 4;  // выделяем четвертую колонку
}
// оно же
.item {
    grid-row: 1; //начинаем с первой строки
    grid-column: 1 / 4; // выбираем все колонки с 1 по 4
}

Что из этого получается? А получается следующая картина:

таблица гридов пример

Надеюсь так понятнее. То есть выделяем мы не сами ячейки. Выделение начинается с линии, а дальше мы указываем до куда.

Советую максимально поиграться с примером выше, чтобы понять как это работает, а если не понятно, советую вручную изменять свойства, либо увеличить таблицу. Грубо говоря максимально разобраться как это работает на практическом примере.

Значения могут быть следующими:

  • число/имя — порядковый номер линии или имя линии к которой мы прикрепляем текущий элемент.
  • span число — слово span означает, что элемент нужно растянуть на указанное количество рядов или колонок.
  • span имя — слово span значит растянуть. Текущий элемент будет растягиваться до указанного названия линии или ряда.

grid-area

Что мне очень нравится, в CSS Grid можно давать элементам имена, а после уже использовать шаблон, с помощью которого можно делать такую расстановку, которую тебе вздумается. Я достаточно популярно попытался раскрыть эту тему в статьи о Grid template layout. Но это не значит, что я не буду приводить здесь примеров.

Как по мне, пример очень даже получился крутой. И очень даже наглядный. Самые внимательные могу заметить, что мы можем перемещать и устанавливать блоки так как угодно, причем структура html вообще не меняется.
Очень полезная возможность при создании каркасов сайта, либо блоков, которые должны отличаться при отображении на мобильной либо десктопной версии.

Получается следующий код:

// сначала задаем имена элементам
.header{
  grid-area: header;
  background-color: green;
}
.content{
  grid-area: content;
  background-color: green;
  height: 200px;
}
.sidebar{
  grid-area: sidebar;
  background-color: green;
   height: 100px;
}
.footer{
  grid-area: footer;
  background-color: green;
}

// после обозначаем как оно будет выглядеть в grid таблице
.grid {
  display: grid;
  color: white;
  grid-template: "header header header" auto
                 "content content sidebar" auto
                 "content content ." auto
                 "footer footer footer" auto 
                 / auto;
 grid-gap: 5px;
}

О том как использовать grid-template можно почитать немного выше, но при этом можно четко понимать, что у нас выйдет приблизительно такая картинка:

грид таблица пример

Так же у gria-area хочу отметить следующий синтаксис:

grid-area: имя области;
grid-area: row-start / column-start / row-end / column-end;
  • имя области — название области сетки.
  • row-start / column-start / row-end / column-end — может быть числом или именем линии.

justify-self, align-self, place-self

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

Вот здесь нам помогут три свойства:

  • align-self;
  • justify-self;
  • place-self;

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

Значение может быть:

  • auto (default) — указывает использовать значение justify-items:, которое задается для контейнера. Если элемент позиционирован через absolute, то применяется normal.
  • stretch — растягивает все элементы на всю ширину/высоту ячеек.
  • start — размещает все элементы в начале ячеек (слева или сверху).
  • end — размещает все элементы в конце ячеек (справа или внизу).
  • center — размещает все элементы по центру ячеек.

Так же имеет редкие значения:

  • safe значение — если ширина или высота элемента превышает размер ячейки, то значение переключается на start. В значении тут может быть только: center или end.
  • unsafe значение — значение остается указанным, даже если ширина или высота элемента превышает размер ячейки. В значении тут может быть только: center или end.

Свойства для контейнера

Как я уже говорил, контейнер — это часть, которая вмещает в себе управляемые элементы. В блочной верстке старого типа такие блоки чаще всего называли «wrapper», что означает с англ. «Обертка». Эта обертка задавала рамки для всего содержащего. То есть ширина адаптивной части не могла быть больше чем позволяет ей быть обертка. На моей памяти чаще всего задается 1280px.

display

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

 display: grid;  /* или */
 display: inline-grid

Разница между этими двумя свойствами в том, как они взаимодействуют с окружающими элементами. Возьмем к примеру два свойства display:block и display:inline-block.
Они являются аналогом тому как работают grid и inline-grid, так как grid получает свойство блока, который грубо говоря растягивается на весь дисплей и отсекает от себя соседние блоки, ставя перед собой после себя enter. Даже если ширина нашего grid’а составляет 500 пикселей, и ширина соседнего блока так же равна 500, а ширина дисплея 1100 к примеру, то отображаться такие блоки будут все равно как два отдельных, и не будут стоять рядом друг с другом.
При таких же условиях если оба блока имеют свойство inline-grid они будут отображаться рядом друг с другом, в примере ниже это можно четко увидеть:

grid-template-columns и grid-template-rows
Оба свойства указывают из скольких строк и колонок состоит сетка и какие будут размеры будут меть ячейки (элементы) находящиеся внутри. Т.е эти два свойства задают две вещи: «какой размер будут иметь ячейки и сколько их будет в ряду».
Оба свойства имеют следующий синтаксис:

grid-template-rows:   размер-первого-столбца размер-второго третьего …;
grid-template-columns: размер-певой-колонки  размер-второй третьей …;
grid-template-rows:    [line-name] размер [line-name] размер … [last-name];
grid-template-columns: [line-name] размер [line-name] размер … [last-name];

Значения этих свойств можно задавать в: px, em, %, vh, vw, fr, min-content, max-content, auto, fit-content, minmax( min, max ).

grid-template

Чтобы немного сократить код, как всегда существует решение, с которым ты можешь задать оба значения внутри одного свойства.
Синтаксис:

 grid-template: grid-template-rows / grid-template-columns
 grid: grid-template-rows / grid-template-columns


Привожу пример, немного он отличается от предыдущего, но в целом становится понятно, как работает этот Grid свойство:

Так же мы можем размещать блоки по именам, с использованием grid-template (см. grid-area)

grid-template-areas

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

grid-column-gap и grid-row-gap

Эти обе функции задают отступ между элементами таблицы, по факту таким же способом можно задавать отступ с помощью margin, но при этом использование grid-gap является более правильным.

Разница между grid-gap и margin

Все дело в том, что задаем мы задаем отступ между ячейками, а вот при использовании margin мы делаем отступ вокруг элемента, что является не одним и тем же.

пример grid ячейки

В целом пример работы с grid-gap можно увидеть в следующей таблице.

grid-gap

Относительно предыдущего примера, запись grid-gap является значительно короче, и достаточно проста в понимании. Для этого, я добавил в предыдущий пример дополнительный пункт, с которым можно поиграться.

justify-items, align-items, place-items

Если в примере с align-self и ему подобных мы управляли одним определенным элементом, то в случае с ниже описанными мы можем управлять всеми сразу.

align-items: значение;    // выравнивает элементы по вертикали ??
justify-items: значение;  // выравнивает элементы по горизонтали ??
place-items: значение;    // сокращенная запись: установит оба значения
place-items: align-items  justify-items; // сокращенная запись

Я попытался создать максимально понятный пример, который позволил мне показать как работают все три свойства.

Во всех трех свойствах можно использовать следующие значения:

  • auto (default) — используется для justify-items:, которое задается для контейнера. Если элемент позиционирован через absolute, то применяется normal.
  • stretch — растягивает все элементы на всю ширину либо высоту ячеек.
  • start — выставляет все элементы в начале ячеек (слева или сверху).
  • end — выставляет все элементы в конце ячеек (справа или внизу).
  • center — это значение размещает все элементы по центру ячеек.

justify-content, align-content, place-content

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

 align-content:   значение;   // выравнивает ряды по вертикали ??
 justify-content: значение;   // выравнивает колонки по горизонтали ??
 place-content:   значение;   // сокращенная запись: установит оба значения
 place-content:   align-content  justify-content; // сокращенная запись

Более наглядный пример управления рядами и колонками:

grid-auto-columns, grid-auto-rows, grid-auto-flow

grid

Свойство grid позволяет сокращенно заменить следующие свойства:

  • grid-template-rows;
  • grid-template-columns;
  • grid-template-areas;
  • grid-auto-rows;
  • grid-auto-columns;
  • grid-auto-flow;
grid: none
grid: grid-template
grid: grid-template-rows / grid-template-columns
grid: grid-template-areas
grid: grid-template-rows / [auto-flow dense?] grid-auto-columns?
grid: [auto-flow dense?] grid-auto-rows? / grid-template-columns

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

grid: 'header header header header'
       'main main main right right'
       'footer footer footer footer';

// тоже что и:
grid-template-areas: 'header header header header'
                      'main main main right right'
                      'footer footer footer footer';
grid: 100px 300px / 3fr 1fr;

// тоже что:
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
grid: auto-flow dense 100px / 1fr 2fr;

// тоже что:
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
grid: 100px 300px / auto-flow 200px;

// тоже что:
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;

Также можно указать более сложный, но удобный для настройки все и сразу:

grid: [row1-start] "header header header" 1fr [row1-end]
      [row2-start]  "footer footer footer" 25px [row2-end] 
      / auto   50px   auto;
// тоже что:
grid-template-areas: "header header header"
                      "footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;

И еще варианты:

grid: repeat(auto-fill, 5em) / auto-flow 1fr;
grid: auto-flow 1fr / repeat(auto-fill, 5em);
grid: auto 1fr auto / repeat(5, 1fr);
grid: repeat(3, auto) / repeat(4, auto);

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

Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Оставьте комментарий