Как работать с CSS Grid: Часть 1

Надеюсь, все ознакомились с общей информацией по CSS Grid и работой с Google Chrome Dev Tools? Если нет, рекомендую это сделать, хотя, как по мне, вторую статью обязательно нужно прочитать.

Кратко напомню: CSS Grid Layout (также называемый «Grid») - это двумерная система макетов на основе сетки, цель которой состоит в полном изменении способа проектирования пользовательских интерфейсов. CSS всегда использовался для верстки веб-страниц, но он никогда не делал это очень хорошо. Сначала использовались таблицы, затем float, позиционирование и inline-block, но все эти методы были по сути хаками, не имеющими многих важных функций (например, вертикальное центрирование). Появление Flexbox помогло решить некоторые проблемы, но они предназначены для простых одномерных макетов, а не сложных двумерных (Flexbox и Grid на самом деле очень хорошо работают вместе).

Updated: Вышла вторая часть, ознакомиться можно здесь.

Терминология

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

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

1) Grid контейнер (Grid Container) - элемент, к которому применяется display: grid. Это прямой родитель всех элементов сетки. В этом примере контейнер является Grid контейнером:

2) Grid элемент (Grid Item) - дочерний элемент (то есть прямой потомок) grid контейнера. В этом примере элементы с классом "item" являются grid элементами, а элемент с классом "sub-item" - нет:

3) Grid линии (Grid Lines) - разделительные линии, составляющие структуру сетки. Они могут быть вертикальными ("column grid lines") или горизонтальными ("row grid lines") и располагаться по обе стороны от строки (row) или столбца (column). В этом примере желтая линия является "column grid line":

4) Grid полоса или дорожка (Grid Track) - пространство между двумя соседними линиями сетки. Вы можете думать о них как о столбцах или строках сетки. В этом примере Grid Track расположен между второй и третьей линиями грида:

5) Grid ячейка (Grid Cell) - пространство между двумя соседними строками и двумя соседними столбцами. Это единый «блок» сетки. В этом примере grid ячейка находится между 1 и 2 горизонтальными линиями сетки и 2 и 3 вертикальными линиями сетки:

6) Grid область (Grid Area) - общая площадь, окруженная четырьмя линиями сетки. Область сетки может состоять из любого количества ячеек сетки. В этом примере область сетки находится между 1 и 3 горизонтальными линиями сетки и 1 и 3 вертикальными линиями сетки:

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

1) Свойства Grid контейнера: display, grid-template-columns, grid-template-rows, grid-template-areas, grid-template, column-gap, row-gap, gap, justify-items, align-items, place-items, justify-content, align-content, place-content, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid.

2) Свойства Grid элемента: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area, justify-self, align-self, place-self.

Не пугайтесь, что их так много, многие из них являются объединением других (как во Flexbox flex-direction и flex-wrap объединяются во flex-flow, с гридами та же тема).

Быстрый взгляд на CSS Grid в браузере

Давайте взглянем на Grid в наших горячо любимых (а если нет, то надо бы их полюбить) Dev Tools. Сначала создайте файл "index.html" и напечатайте следующий код (да, придется поработать ручками, так лучше запоминается, копипаста - нормас, но если ей злоупотреблять - пиши пропало):

Затем откройте этот файл в браузере Google Chrome и вызовете Dev Tools нажатием клавиши "F12". Наведите мышкой на <div class="container"> - вы должны увидеть следующую картину:

Видите разделительные линии разных стилей (сплошные, с разрывами)? Это браузер таким образом помогает нам работать с CSS Grid. Вертка сетками - действительно сложный процесс, и дабы не потеряться в своих собственных результатах и не охреневать от неожиданных последствий, браузер выделяет сетку и её элементы специальными линиями. Чтобы понять, что именно выделяет каждая из линий, нам нужно изучить все свойства Grid контейнера. То есть, мы будем параллельно изучать как сами свойства с их значениями, так и интерпретацию этих свойств в браузере. Поэтому, будьте готовы ковыряться во всем этом, и еще раз настоятельно рекомендую прочитать статью о Dev Tools - без нее будет тяжко.

Итого

Мы начали погружение в мощный инструмент в арсенале фронтендера и верстальщика - CSS Grid. Разобрали терминологию, увидели большое количество свойств и результат выполнения HTML и CSS кода в браузере с помощью Dev Tools. В следующей статье мы начнем разбор свойств Grid контейнера - пока не знаю, разом я это охвачу, или разделю обзор на несколько статей, в процессе написания решу.