Что такое grid css

Гайд по grid

CSS Grid Layout (спецификация) или просто гриды — это удобная технология для раскладки элементов на веб-страницах. В отличие от флексбоксов, одновременно работающих только с одним измерением, гриды дают возможность работать одновременно с двумя: горизонталью и вертикалью.

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

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

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

Основные термины

Грид-контейнер: родительский элемент, к которому применяется свойство display: grid .

Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.

Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов.

Схематичный вид грид-линии колонки.

Синяя линия — грид-линия колонки.

Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.

Схематичный вид грид-ячейки между первой и второй грид-линиями ряда и второй и третьей грид-линиями колонки.

Грид-ячейка — между первой и второй грид-линиями ряда и второй и третьей грид-линиями колонки.

Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.

Схематичный вид горизонтальной грид-полосы между первой и второй грид-линиями ряда.

Горизонтальная грид-полоса между первой и второй грид-линиями ряда.

Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.

Схематичный вид грид-области между первой и третьей грид-линиями ряда и первой и второй грид-линиями колонки.

Грид-область между первой и третьей грид-линиями ряда и первой и второй грид-линиями колонки.

Свойства грид-контейнера

display

Если элементу задано свойство display со значением grid , то такой элемент становится грид-контейнером. Дочерние элементы этого контейнера начинают подчиняться правилам грид-раскладки. Снаружи грид-контейнер ведёт себя как блок.

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

grid-template-columns , grid-template-rows

Свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно.

Пример реализации свойств grid-template-columns, grid-template-rows.

Можно явно именовать грид-линии, используя для этого квадратные скобки:

Пример реализации свойств grid-template-columns, grid-template-rows с использованием именования грид-линий с помощью квадратных скобок.

Каждая линия может иметь больше одного имени. Это чем-то похоже на классы в HTML — вы можете задать элементу больше одного класса. Тут аналогичная ситуация. Например, такой код будет совершенно валиден, у второй и третьей грид-линий колонки по два имени:

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

Будет создано 3 колонки по 250 пикселей:

С появлением гридов у нас появилась и новая единица измерения: fr 🦊

fr (от fraction — доля, часть) отвечает за свободное пространство внутри грид-контейнера.

Например, этот код создаст три колонки, каждая из которых будет занимать 1/3 ширины родителя:

Что аналогично записи:

Свободное пространство рассчитывается после того, как место отдано всем фиксированным размерам. К примеру, в коде ниже сначала будет создана колонка шириной 200 пикселей, а затем свободное пространство — ширина родителя минус 200 пикселей — будет поделено между остальными колонками. Каждая будет занимать ширину (100% — 200px) / 2:

grid-auto-columns , grid-auto-rows

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

Пример реализации свойств grid-auto-columns, grid-auto-rows.

В этом примере создаются две явные колонки размером 50 и 150 пикселей соответственно. Элементы, начиная с третьего, в эти два ряда не помещаются, и для них создаются автоматические ряды. При помощи свойства grid-auto-rows мы указываем, что автоматические ряды должны иметь размер 15 пикселей.

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

Важно указать при помощи grid-auto-flow: column , что элементы должны вставать в колонки, чтобы элементы без контента были видны.

Пример реализации свойств grid-auto-columns, grid-auto-rows с разными размерами колонок.

Как видите, автоматически создаются колонки размером 15, 25 и затем 5 пикселей. И так до тех пор, пока элементы не закончатся.

grid-auto-flow

Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid-auto-flow . По умолчанию значение у этого свойства row , лишние элементы будут выстраиваться в ряды в рамках явно заданных колонок.

  • row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
  • column — автоматически размещаемые элементы выстраиваются в колонки.
  • dense — браузер старается заполнить дырки (пустые ячейки) в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.

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

Пример реализации свойства grid-auto-flow со значением row

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

Добавим к значению свойства grid-auto-flow слово dense :

Пример реализации свойства grid-auto-flow со значением row dense.

Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.

Посмотрим пример со значением column :

Пример реализации свойства grid-auto-flow со значением column.

Видим аналогичную картину: третий элемент не поместился в последнюю ячейку первой колонки и встал во вторую колонку. Следующий за ним четвёртый элемент встал ниже во второй колонке.

Добавим dense к текущему значению:

Пример реализации свойства grid-auto-flow со значением column dense.

В результате четвёртый элемент занял пустую ячейку в первой колонке.

grid-template-areas

Позволяет задать шаблон сетки расположения элементов внутри грид-контейнера. Имена областей задаются при помощи свойства grid-area . Текущее свойство grid-template-areas просто указывает, где должны располагаться эти грид-области.

  • none (значение по умолчанию) — области сетки не задано имя.
  • . — означает пустую ячейку.
  • название — название области, может быть абсолютно любым словом или даже эмодзи! 🤯

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

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

Получится такая раскладка:

Пример реализации свойства grid-template-areas.

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

grid-template

Свойство-шорткат для свойств grid-template-rows , grid-template-columns . Позволяет записать все значения в одну строку. Главное после этого не запутаться при чтении 😅

Можно прописать все колонки и ряды сразу, разделяя их слэшем / . Сперва идут ряды, а затем колонки, не перепутайте!

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

Но техническая возможность есть, выбирать вам! 😉

column-gap , row-gap

Задаёт отступы между колонками или рядами.

Пример реализации свойств column-gap и row-gap.

В инспекторе отступы заштриховываются, так их можно отличить от грид-элементов. В этом примере между рядами отступы по 50 пикселей, а между колонками — по 10 пикселей.

Шорткат для записи значений свойств row-gap и column-gap . Значения разделяются пробелом:

justify-items

Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.

start — выравнивает элемент по начальной (левой для LTR) линии.

Пример реализации свойства justify-items со значением start.

end — выравнивает элемент по конечной (правой для LTR) линии.

Пример реализации свойства justify-items со значением end.

center — выравнивает элемент по центру грид-ячейки.

Пример реализации свойства justify-items со значением center.

stretch — растягивает элемент на всю ширину грид-ячейки.

Пример реализации свойства justify-items со значением stretch.

Можно управлять выравниванием отдельных грид-элементов при помощи свойства justify-self .

align-items

Свойство, с помощью которого можно выровнять элементы по вертикальной оси внутри грид-контейнера.

start — выравнивает элемент по начальной (верхней) линии.

Пример реализации свойства align-items со значением start.

end — выравнивает элемент по конечной (нижней) линии.

Пример реализации свойства align-items со значением end.

center — выравнивает элемент по центру грид-ячейки.

Пример реализации свойства align-items со значением center.

stretch — растягивает элемент на всю высоту грид-ячейки.

Пример реализации свойства align-items со значением stretch.

place-items

Шорткат для указания значений сразу и для align-items и для justify-items . Указывать нужно именно в таком порядке.

Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды относительно новая и не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.

none — значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.

Можно указать допустимые значения для шортката grid-template :

В том числе можно указать имена линий:

Можно задать размеры колонок и рядов. Создадим два ряда и две колонки:

auto-flow — это ключевое слово даёт браузеру понять, что создавать при необходимости: колонки или ряды.

Если auto-flow стоит справа от слэша, то будут создаваться автоматические колонки:

Если auto-flow стоит слева от слэша, то будут создаваться автоматические ряды:

dense — к ключевому слову auto-flow можно добавить dense . Это укажет браузеру, что элементы должны стараться заполнить свободные ячейки. Подробнее про работу этого ключевого слова можно почитать в статье про grid-auto-flow .

Важно ставить это слово сразу после auto-flow :

Ниже будет несколько примеров с блоками кода, которые делают одно и то же, в первом случае через шорткат, во втором — как обычно.

Задаёт размеры и количество колонок и рядов:

Задаёт размеры и количество рядов, а также автоматические колонки:

Задаёт размеры и количество рядов, автоматические колонки и распределение dense :

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

Что соответствует такому коду:

Свойства грид-элементов

Важное замечание: свойства float , display: inline-block , display: table-cell , vertical-align и column-* не дают никакого эффекта, когда применяются к грид-элементам.

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

Определяют положение элемента внутри грид-сетки при помощи указания на конкретные направляющие линии.

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

Пример реализации свойств grid-column-start, grid-column-end, grid-row-start, grid-row-end с первым вариантом значений.

Элемент разместился по горизонтали от второй грид-линии до линии с названием [five] , а по вертикали — от линии с именем [row1-start] до линии под номером 3.

Пример реализации свойств grid-column-start, grid-column-end, grid-row-start, grid-row-end со вторым вариантом значений.

Элемент расположился по вертикали от второй грид-линии и растянулся на две ячейки, а по горизонтали — от первой линии и растянулся до линии с названием [col4-start] .

Если не указать значения для свойств grid-column-end и grid-row-end , то элемент по умолчанию будет размером в одну грид-ячейку.

Элементы могут перекрывать друг друга, накладываться друг на друга. Можно использовать свойство z-index для управления контекстом наложения.

grid-column , grid-row

Свойства-шорткаты для grid-column-start , grid-column-end и grid-row-start , grid-row-end соответственно.

Значения для *-start и *-end разделяются слэшем.

Можно использовать ключевое слово span , буквально говорящее «растянись на столько-то». А на сколько, указывает стоящая за ним цифра.

Пример реализации свойств-шорткатов grid-column, grid-row.

Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от линии с именем [third-line] и заканчивается у четвёртой линии.

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

grid-area

Двуличное свойство 🧐, которое может как указывать элементу, какую из именованных областей ему нужно занять, так и служить шорткатом для одновременного указания значений для четырёх свойств: grid-column-start , grid-column-end , grid-row-start и grid-row-end .

Пример с указанием на именованную область:

А теперь пример с указанием всех четырёх значений в строку. При таком указании значений есть скользкое место: значения указываются в таком порядке: row-start / column-start / row-end / column-end , то есть сначала указываем оба начала, а потом оба конца.

justify-self

С помощью этого свойства можно установить горизонтальное выравнивание для отдельного элемента, отличное от выравнивания, заданного грид-родителю.

Возможные значения аналогичны значениям свойства justify-items .

Пример реализации свойства justify-self.

align-self

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

Пример реализации свойства align-self.

place-self

Шорткат для одновременного указания значений свойствам justify-self и align-self .

  • auto (значение по умолчанию) — стандартное значение, можно использовать для сброса ранее заданных значений.
  • align-self justify-self — первое значение задаёт значение свойству align-self , второе значение устанавливает значение свойства justify-self . Если указано всего одно значение, то оно устанавливается для обоих свойств. Например, place-self: center отцентрирует элемент по горизонтальной и по вертикальной осям одновременно.

Специальные функции и ключевые слова

Когда вы задаёте размеры колонкам и рядам, вам доступны не только давно известные единицы измерения ( px , vw , rem , % и так далее), но и очень крутые ключевые слова min-content , max-content и auto . И уже упомянутые единицы измерения fr .

Гриды подарили нам ещё одну волшебную функцию, позволяющую одновременно задавать минимальный и максимальный размер — minmax() . Например, в случае записи grid-template-columns: minmax(200px, 1fr); колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей.

Ещё одна полезная функция, появившаяся в гридах, это repeat() . Сэкономит вам кучу лишних букв и времени.

Вёрстка на Grid в CSS. Полное руководство и справочник

Stas Bagretsov

Эта статья показывает как работает эта сравнительно новая технология, именно работает, а не имеет только описание свойств с поверхностными примерами.

Сама статья является адаптивным дополненным переводом CSS Grid Tutorial

Вёрстка на Grid в CSS. Полное руководство и справочник

Gri d модуль для CSS был разработан рабочей группой CSS для того, чтобы сделать создание шаблонов в CSS максимально удобным. Он попал в рекомендации по официальному внедрению в феврале 2017 года, а основные бразуеры начали его поддержку уже в марте 2017 года.

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

С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid несомненно будут менять представление о создании веба как такового.

Введение

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

С развитием веба, в последние годы, разработка шаблонов веб-сайтов стала всё более затруднительной. В ранние годы веба, HTML таблицы зачастую использовались для многоколоночных шаблонов, форм и т.д. Но у этого метода есть свои недостатки. Это означает то, что представление шаблона, как такового должно было быть сделано на уровне разметки, таким образом стирая различие между представлением и контентом. По факту, таблицы были созданы для того, чтобы содержать табличные данные и только для этого. И уже даже не касаясь семантических проблем, табличные шаблоны совершенно не созданы для адаптивного дизайна.

Флоаты в конечном итоге заменили таблицы как всеобще приемлемый и рекомендованный метод создания разметки шаблона, так как он позволяет нам позиционировать элементы вне зависимости от изначальной разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для создания шаблонов документов и они не совсем были подходящими для создания сложных шаблонов приложений, которые сейчас распространены в сети и которые мы привыкли видеть в своих браузерах. Флоат элементы сложно контролировать, особенно на девайсах и viewport’ах разных размеров. Это привело к различным гридободобным хакам, которые уже стали нормой, большинству из них требовалась дополнительная разметка, которая отвлекала от общей концепции разделения контента. Таким образом рабочая группа CSS находилась в поиске наилучшего решения для всех задач.

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

Хотя flexbox уже позволил разработчикам начать уходить от флоат элементов, но он работает только в одном измерении. Grid CSS же это делает в двух, таким образом лучше подходя для создания сложных, комплексных шаблонов.

Как это работает?

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

Чтобы создать Grid разметку, вам просто нужно выставить элементу display: grid . Этот шаг автоматически сделает всех прямых потомков этого элемента — grid элементами. После этого вы можете смело использовать разнообразные grid свойства для выравнивания размеров и позиционирования элементов должным образом. Обычно первым шагом является определение того, сколько колонок и рядов есть в гриде. Но даже это опциональный момент — как вы увидите далее.

Это пример грида с четырьмя рядами и тремя колонками. Он состоит из 12 grid элементов. Каждый из этих элементов отмечен зеленым и между ними есть небольшое расстояние.

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

Создаем Grid

Вот пример простого 3×3 грида с небольшими отступами между элементами.

Давайте внимательнее вглядимся в код. HTML разметка для CSS Grid выглядит вот так:

Таким образом мы видим обычный HTML, состоящий из элементов, вложенных в свой внешний элемент. Но именно для наших целей, внешний <div> это контейнер гридов. Соотвественно, все элементы вложенные в него будут являться грид элементами.

Но по факту, это не будет полноценными гридом, пока мы не применим кое-какой CSS для него. Вот код, который создаёт его:

Это правило применяется к внешнему <div> , так как ему было назначено ID #grid .

Вот объяснение того, что написано в этом CSS:

Превращает элемент в grid контейнер. Это все, что нужно для того, что создать грид. Теперь у нас есть грид-контейнер и грид-элементы. Значения гридов создают блочный контейнер. Вы так же можете использовать display: inline-grid , что создать строчный грид-контейнер. Или же вы можете использовать display: subgrid , чтобы создать подсетку, это значение используется на самих grid элементах.

grid-template-rows: 1fr 1fr 1fr

Выстраивает ряды в гриде. Каждое значение представляет размер ряда. В этом случае все значения равны 1fr. Очень подробно и понятно про (fr) можно почитать тут.

Но конечно же, для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.

grid-template-columns: 1fr 1fr 1fr

Тоже самое, что и выше, только определяет колонки в гридах.

Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.

Ну, а другая часть кода просто назначает разные стили грид элементам.

Функция repeat()

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

Мы можем сделать так:

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

Создаем шаблон сайта с CSS Grid

Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, поэтому становится очень легко создавать и изменять сам шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании грид разметки.

Давайте теперь создадим шаблон сайта, который выглядит таким образом:

А вот код этого шаблона:

Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:

Итак, мы сделаем <body> грид-контейнером, таким образом все другие элементы станут грид-элементами.

А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.

Подробнее про grid-template-areas вы можете прочитать в статье Поразительный CSS Grid Area

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

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

Теперь мы можем назначить каждую из этих грид-областей каждому элементу:

Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы уже предварительно указали в grid-template-areas .

Большая часть шаблона уже завершена. Остаток кода просто будет относиться к размерам, пробелам и высотам, в общем скорее к декоративной области.

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

Первая и третья строки — обе в 60px высотой, а вторая строка забирает все оставшееся место.

Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .

Таким образом, если мы сменим на это:

То в результате получим такой шаблон:

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

Для примера, чтобы сделать так:

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

Создаем адаптивный Grid

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

Пример использования Auto-fill :

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

Код отвечающий именно за это:

В нем колонкам выдается минимальный размер в 150px и максимум по оставшемуся месту. Такие треки будут повторяться столько раз, сколько нужно для того, чтобы уложиться в заданный контейнер.

Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться такое количество раз, пока они не заполнят контейнер.

Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .

Пример с Auto-fit

auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.

Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.

Гриды с медиа запросами

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

Это делает CSS Grid идеальным для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в конечный медиа запрос.

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

А вот соответствующий код для мобильной версии:

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .

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

Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.

Совмещаем grid c block

В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:

Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads , но если бы мы использовали display: block , то nav был бы выше ads .

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

Явные и неявные гриды

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

Явный грид — это грид, который вы определяете в grid-template-rows , grid-template-colums и в grid-template-areas .

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

Неявные гриды автоматически генерируются самим грид-контейнером всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют как таковые неявные. Вот пример:

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

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

Выставляем размер трека для неявных гридов

Возможно вы заметили, что дополнительный ряд не такой в высоту как предыдущие два. Это потому, что мы выставили высоту строки в grid-template-rows свойстве, но применяется она только для явных гридов. Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows . Но так как мы этого не сделали, выходит, что неявный ряд использует размер трека auto , который основывается на контенте. Вот так располагаются свойства выставления размера трека:

В общем выходит так:

Явный грид использует grid-template-rows и grid-template-columns

Неявный грид использует grid-auto-rows и grid-auto-columns

В следующем примере мы сделаем явные и неявные строки одной высоты ( 60px ).

Auto-flow — строки или колонки

Пока что мы создавали только дополнительные строки, чтобы уложить дополнительные грид-элементы. Но что, если мы хотим использоваться дополнительные колонки?

Для этого у нас есть свойство grid-auto-flow

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

Вот что случится, если мы применим это к первому примеру.

Само собой, вы можете попробовать пойти дальше в этом примере и использовать grid-auto-columns свойство, чтобы изменить ширину автоматически сгенерированной колонки. Так что если вы хотите, чтобы все колонки выше, были одинаковой ширины, вам надо использовать grid-auto-columns: 1fr .

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

Опциональное значение dense

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

Вёрстка на Grid в CSS. Полное руководство и справочник

Вёрстка на Grid в CSS. Полное руководство и справочник

Эта статья показывает, как работает эта сравнительно новая технология, именно работает, а не только описание свойств с поверхностными примерами.

Grid модуль в CSS был разработан CSS Working Group для того, чтобы предоставить наилучший способ создания шаблонов в CSS. Он попал в Candidate Recommendation в феврале 2017 года, а основные бразуеры начали его поддержку в марте 2017 года.

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

С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid будут несомненно менять то, на чем создается веб.

Введение

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

С развитием веба в последние годы, разработка шаблонов веб-сайтов стала всё затруднительнее. В ранние годы веба, HTML таблицы зачастую использовались для многоколоночных шаблонов, форм и т.д. Но у этого метода есть свои недостатки. Это означает то, что представление должно было быть сделано на уровне разметки, таким образом не было различий между представлением и контентом. По-факту, таблицы были созданы для того, чтобы содержать табличные данные, а не для создания шаблонов. И не касаясь семантических проблем, табличные шаблоны не созданы для респонсив дизайна.

Флоаты в конечном итоге заменили табличные шаблоны как всеобще приемлемый и рекомендованный метод создания шаблонов, так как он позволяет нам позиционировать элементы вне зависимости от разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для шаблонов документов и они не были подходящими для сложных шаблонов приложений, которые сейчас распространены в сети. Флоат элементы сложно контролировать, особенно на девайсах и viewport разных размеров. Это привело к различным гридободобным хакам, которые стали нормой, большинство из них требовалась дополнительная разметка, которая отвлекала от всей концепции разделения контента. Таким образом CSS Working Group было в поиске решения получше.

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

Вёрстка на Grid в CSS. Полное руководство и справочник

В то время как flexbox уже позволил разработчикам начать уходить от флоат элементов, flexbox только работает в одном измерении. Grid CSS же это делает в двух, таким образом лучше подходя для создания сложных шаблонов.

Как это работает?

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

Чтобы создать Grid, вам просто нужно выставить элементу display: grid. Это автоматически сделает всех прямых потомков этого элемента — grid элементами. Сейчас вы можете использовать разнообразные grid свойства для выравнивания размера и позиционирования должным образом. Обычно первым шагом является определение того, сколько колонок и рядов есть в grid. Но даже это опционально — как вы увидите далее.

Это пример грида с четырьмя рядами и тремя колонками. Он состоит из 12 grid элементов. Каждый из этих элементов зеленый и между ними есть небольшое расстояние.

Все эти grid элементы одного размера, но они могли бы быть любого размера, какого мы захотим. Мы могли бы сделать их разными по размерам, если бы захотели. Некоторые могли бы охватывать несколько столбцов и рядов, другие могли бы оставаться размеров с одну ячейку. Далее в этой статье вы узнаете об этих и других функциях в grid, некоторые из которых вполне смогут вас удивить.

Создаем Grid

Вот пример простого 3&#215;3 грида с небольшими пробелами между сетками.

Вёрстка на Grid в CSS. Полное руководство и справочник

Давайте внимательнее вглядимся в код. HTML разметка для CSS Grid выглядит вот так:

Таким образом это обычный снипет HTML состоящий из элементов вложенных во внешний элемент. Но именно для наших целей, внешний <div> это контейнер гридов. Соотвественно, все элементы вложенные в него будут являться грид элементами.

Но по-факту, это не будет полноценными гридом, пока мы не применим кое-какой CSS для него. Вот код, который создаёт его:

Это правило применяется к внешнему <div> , так как ему было назначено ID #grid .

Вот объяснение того, что написано в этом CSS:

Превращает элемент в grid контейнер. Это все, что нужно для того, что создать грид. Теперь у нас есть грид-контейнер и грид-элементы. Значения гридов создают блочный контейнер. Вы так-же можете использовать display: inline-grid, что создать строчный грид-контейнер. Или же вы можете использовать display: subgrid, чтобы создать подсетку, это значение используется на самих grid элементах.

grid-template-rows: 1fr 1fr 1fr

Выстраивает ряды в гриде. Каждое значение представляет размер ряда. В этом случае все значения равны 1fr. Очень подробно и понятно про (fr) можно почитать тут.

Но конечно же для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.

grid-template-columns: 1fr 1fr 1fr

Тоже самое, что и выше, только определяет колонки в гридах.

Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу длины, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.

Ну, а другая часть кода просто назначает разные стили грид элементам.

Функция repeat()

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

Мы можем сделать это:

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

Создаем шаблон сайта с CSS Grid

Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, по-этому становится очень легко создавать и изменять ваш шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании гридов.

Давайте теперь создадим шаблон сайта, который выглядит таким образом:

Вёрстка на Grid в CSS. Полное руководство и справочник

А вот код этого шаблона:

Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:

И так, мы сделаем <body> грид-контейнером, таким образом все другие элементы станут грид-элементами.

А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.

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

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

Теперь мы можем назначить каждую из этих грид-областей каждому элементу:

Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы предварительно указали в grid-template-areas.

Большая часть шаблона уже завершена. Остаток кода просто будет относиться к размерам, пробелам и высотам, в общем скорее к декоративной области.

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

Первая и третья строки — обе в 60px высотой, а вторая строка забирает все оставшееся место.

Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .

Таким образом, если мы сменим на это:

То в результате получим такой шаблон:

Вёрстка на Grid в CSS. Полное руководство и справочник

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

Для примера, чтобы сделать так:

Вёрстка на Grid в CSS. Полное руководство и справочник

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

Создаем адаптивный Grid

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

Пример использования Auto-fill :

Вёрстка на Grid в CSS. Полное руководство и справочник

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

Код отвечающий за это:

В нем колонкам выдается минимальный размер в 150px и максимум по оставшемуся месту. Такие треки будут повторяться столько раз, сколько нужно для того, чтобы уложиться в контейнер.

Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться столько раз, пока они не заполнят контейнер.

Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .

Auto-fit

auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.

Вёрстка на Grid в CSS. Полное руководство и справочник

Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.

Гриды с медиа запросами

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

Это делает гриды идеальными для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в медиа запрос.

Вёрстка на Grid в CSS. Полное руководство и справочник

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

А вот соответствующий код для мобильной версии:

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .

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

Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.

Совмещаем grid c block

В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:

Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads, но если бы мы использовали display: block , то nav был бы выше ads.

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

Явные и неявные гриды

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

Явный грид, это грид, который вы определяете в grid-template-rows, grid-template-colums и в grid-template-areas.

Явные и неявные гриды

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

Неявные гриды автоматически генерируются грид-контейнером, всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют неявные. Вот пример:

Вёрстка на Grid в CSS. Полное руководство и справочник

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

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

Выставляем размер трека для неявных гридов

Возможно вы заметили, что дополнительный ряд не такой в высоту, как предидущие два. Это потому что мы выставили высоту строки в grid-template-rows свойстве, но применяется она только для явных гридов. Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows. Но так как мы этого не сделали, выходит, что неявный ряд использует размер трека auto, который основывается на контенте. Вот так располагаются свойства выставления размера трека:

Вёрстка на Grid в CSS. Полное руководство и справочник

В общем выходит так:

Явный грид использует grid-template-rows и grid-template-columns

Неявный грид использует grid-auto-rows и grid-auto-columns

В следующем примере мы сделаем явные и неявные строки одной высоты ( 60px ).

Вёрстка на Grid в CSS. Полное руководство и справочник

Auto-flow — строки или колонки

Пока что мы создавали только дополнительные строки, чтобы уложить дополнительные грид-элементы. Но что, если мы хотим использоваться дополнительные колонки?

Для этого у нас есть свойство grid-auto-flow

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

Вот что случится, если мы применим это к первому примеру.

Вёрстка на Grid в CSS. Полное руководство и справочник

Само собой, вы можете попробовать пойти дальше в этом примере и использовать grid-auto-columns свойство, чтобы изменить ширину автоматически сгенерированной колонки. Так что если вы хотите, чтобы все колонки выше, были одинаковой ширины, вам надо использовать grid-auto-columns: 1fr .

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

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

Применение dense превратит его в такое:

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

Расстановка Grid-элементов

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

К счастью, это не сложная для понимания концепция. Просто напросто, все сходится к грид-линиям.

Вёрстка на Grid в CSS. Полное руководство и справочник

Грид линии это горизонтальные и вертикальные линии в гриде. Каждая строка и колонка имеет грид линию с каждой своей стороны. У каждой грид линии есть числовой индекс, к которому вы можете ссылаться во время расстановки грид элементов.

Вёрстка на Grid в CSS. Полное руководство и справочник

На примере выше, первый грид элемент начинается со строчной линии 1 и колоночной линии 1, а заканчивается на строчной линии 2 и колоночной линии 2. Второй грид элемент начинается на строчной линии 3 и колоночной линии 2, а заканчивается на строчной линии 4 и колоночной линии 4.

Это можно сделать с помощью следующего кода.

Вёрстка на Grid в CSS. Полное руководство и справочник

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

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

Именование грид линий

Вы также можете проименовать грид линии для облегчения обращения к ним. Это можно делать выставляя свойства grid-template-rows и grid-template-columns , например как тут:

Проименованные линии могут быть как явными, так и неявными. Неявные проименованные линии создаются всякий раз, когда вы создаете именные грид-области используя grid-template-areas .

Имя берется из грид-области с прибавлением в конце -start и -end, в зависимости от того начало это или конец линии.

Таким образом для каждой проименованной грид области header, будет создано четыре неявных линии. Две названы header-start и column-start в проименованной грид области и две названы header-end соответственно.

Проименованные грид области

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

Вы можете указать пустую ячейку, используя точку (.) или серию точек без пробелов. Для примера:

Свойства размещения гридов

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

grid-area — это свойство является сокращением для для:

grid-column — это свойство является сокращением для:

grid-column-start — указывает какая колоночная линия грид элемента стартовая и на сколько треков тянется.

grid-column-end — указывает то, на каких колоночных линиях заканчивается грид элемент и на сколько треков тянется.

grid-row — это свойство является сокращением для:

grid-row-start — указывает с какой строчной линии начинается грид элемент и на сколько треков он тянется.

grid-row-end — указывает какая строчная линия будет последней для элемента и насколько треков она будет тянуться.

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

Создаем вложенный грид

Грид элементы могут сами становиться гридами в CSS Grid. То есть вы сможете вкладывать грид-элемент в другой грид-элемент, тем самым создавая вложенный грид.

Чтобы создать такой вложенный грид, все что вам нужно сделать — это применить display: grid (или display: inline-grid ) к грид элементу и он сам станет гридом. Вы также можете использовать display: subgrid для создания подгрида. Посмотрите на примере, как это происходит.

Вёрстка на Grid в CSS. Полное руководство и справочник

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

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

Для примера, вы выставили grid-auto-flow: column на родительском гриде, но вы не выставили свойство на вложенный грид. В этом случае, вложенному гриду будет выставлено значение row, потому что это изначальное значение для этого свойства.

Вёрстка на Grid в CSS. Полное руководство и справочник

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

Подгриды

CSS Grid модуль задает значение subgrid для свойства display . Тем не менее, не все браузеры его ещё поддерживают. Это значение должно оказаться довольно полезным.

Subgrid это вложенный грид, но с display: subgrid . Это делает его особенным типом грид-контейнера, который участвует в выставлении размера грида родительского грид контейнера. Другими словами, контент подгрида влияет на размер родительского грида, позволяя контенту расставляться по двум гридам. Ниже пример того, где это свойство могло бы быть полезным.

Вот список элементов:

А вот CSS, где список является гридом, а элементы списка являются подгридами.

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

Формы с авто-размещением

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

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

Не нужды в дополнительной разметке, чтобы правильно все расставить. И также тут нет нужды в добавлении дополнительных классов для элементов формы. Мы добавляем только один класс для <form> элемента, но хотя даже и это опциоально. Вот рабочий пример:

Вёрстка на Grid в CSS. Полное руководство и справочник

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

Это является возможным, так как мы сделали саму форму гридом (к .myForm применено display: grid ). И потом указали, что labels идут в одну колонку, а controls в другую.

Вот ещё один пример, на этот раз с ещё большим количеством элементов:

Когда подгриды получат широкое распространение среди браузеров, станет возможным выравнивать элементы формы, которые не прямые потомки <form> . Например такие, как списки элементов формы.

CSS Grid выравнивание

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

Свойство align-items указывает стандартное значение align-self для всех грид элементов участвующих в грид контейнере в контексте форматирования оного.

Вёрстка на Grid в CSS. Полное руководство и справочник

На примере выше, мы применяем align-items: center для грид контейнера, следовательно все грид элементы будут выровнены по центру блочной оси.

Но так как это дефолтно, любой из грид элементов может переписать его с помощью align-self свойства.

Align-self свойство

Это свойство выравнивает элемент внутри блока контейнера вдоль блочной/колоночной/поперечной осей.

Вёрстка на Grid в CSS. Полное руководство и справочник

Тут красному элементу выставлено значение baseline , а синий элемент имеет значение stretch . Высота синего элемента равна auto, таким образом он растягивается на всю высоту области грида.

Тем не менее, мы не выставляли свойств для зеленого элемента. Он использует дефолтное значение, которое в нашем случае равняется center в align-items грид контейнера.

Свойство justify-items

Это свойство указывает стандартное значение для justify-self значения всех грид элементов в грид контейнере.

Вёрстка на Grid в CSS. Полное руководство и справочник

Свойство justify-self

Это свойство может использоваться для выравнивания индивидуальных грид элементов вдоль строчной/линейной/главной осей.

Вёрстка на Grid в CSS. Полное руководство и справочник

justify-content свойство

Свойство justify-content выравнивает контент грид контейнера плоностью вдоль главной оси.

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

Вёрстка на Grid в CSS. Полное руководство и справочник

Свойство align-content

Это свойство схоже с justify-content , кроме того, что это свойство выравнивает вдоль поперечной/блочной осей.

Вёрстка на Grid в CSS. Полное руководство и справочник

Свойство place-content

Это свойство является сокращением для justify-content и align-content.

Вёрстка на Grid в CSS. Полное руководство и справочник

Свойство place-items

Это свойство является сокращением для justify-items и align-items .

Вёрстка на Grid в CSS. Полное руководство и справочник

Свойство place-self

Это свойство является сокращением для justify-self и align-self

Вёрстка на Grid в CSS. Полное руководство и справочник

Наложение Grid элементов

Используя шаблоны CSS на гридах, представляется возможным накладывать грид элементы друг на друга посредством пересечения грид областей, отрицательных внешних отступов и других техник позиционирования. Когда происходит наложение, элементы накладываются друг на друга в заданном порядке или в соответствии с z-index .

Простой порядок

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

Вёрстка на Grid в CSS. Полное руководство и справочник

Измененный порядок в документе

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

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

Используя эту технику, грид элементы накладываются в возрастающем порядке от низшего. Вот пример

Вёрстка на Grid в CSS. Полное руководство и справочник

Используем z-index свойство

Так же можно использовать свойство z-index чтобы раскладывать элементы. Это свойство позволяет вам контролировать порядок элементов вдоль z-оси. Вот пример.

Вёрстка на Grid в CSS. Полное руководство и справочник

Комбинируем z-index и order

Если у грид элементов был сменен порядок как на z-index , так и на order, то в порядке наложения z-index играет решающую роль. Это позволяет вам менять порядок элементов без потери контроля над наложением. Вот пример.

Вёрстка на Grid в CSS. Полное руководство и справочник

Абсолютное позиционирование и гриды

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

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

Вёрстка на Grid в CSS. Полное руководство и справочник

Но тем не менее, есть несколько вещей, которые нужно помнить при позиционировании элементов в гриде.

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

Вёрстка на Grid в CSS. Полное руководство и справочник

В этом примере, явно указан только бокс под номером четыре, во второй колонке первой строки, а все остальные боксы имеют параметры auto. Четвертый бокс фактически выталкивает второй бокс из своего слота — боксы 2 и 3 имеют авторазмещение в следующих доступных грид областях. Следовательно, четвертый бокс повлиял на расстановку грид элементов таким образом.

Выставляя четвертому боксу position: absolute , он все равно будет находится на позиции второго бокса, но второй бокс также будет находится на своем месте нетронутым, также как и третий бокс.

Вёрстка на Grid в CSS. Полное руководство и справочник

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

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

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

Помните, что значение auto изначальное значение для свойств размещения гридов, так что это может произойти по-дефолту, если вы не указали другое значение.

Инспектор Грид

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

Интспектор гридов в DevTools позволит вам увидеть линии гридов и любые пробелы между ними. Например как тут:

Вёрстка на Grid в CSS. Полное руководство и справочник

Как использовать инстпектор гридов в Firefox.

Откройте инспектор. Смотря веб страницу в бразуере, кликните правой мышкой на гриде, который хотите проинспектировать и выберите Inspect Element из контекстного меню.

Вёрстка на Grid в CSS. Полное руководство и справочник

Убедившись, что элемент с display: grid выбран в панели с исходным кодом и вкладка rules выбрана в другой панели, кликните на иконку грида, между display: grid .

Вёрстка на Grid в CSS. Полное руководство и справочник

Для Google Chrome же советую скачать дополнение — CSS Grid Highlighter for Chrome

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

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