CSS grid: основы работы OTUS

Содержание

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

С помощью верстки можно нарисовать таблицу или разместить информацию по табличному типу. Для данной затеи используется CSS grid. Предстоит выяснить, что собой представляет соответствующий язык разметки, как он создается и какие параметры предусматривает. Предложенная информация пригодится всем верстальщикам и веб-разработчикам.

Определение

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

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

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

картинки;
любой текст;
кнопки;
блоки HTML-кода;
иные компоненты.

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

Ключевые термины и определения

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

Грид-контейнер. Такое название получил родительский элемент. К нему в процессе верстки будет применяться свойство display: grid. Он является основным элементов всей разметки. Хранит в себе все содержимое имеющейся сетки.
Грид-элемент – дочерний элемент. Является прямым потомком грид-контейнера. Подчиняется принципам и правилам раскладки гридов. Это какой-либо элемент на веб-странице.
Grid-линия – линия-разделитель. С ее помощью удается сформировать структуру рассматриваемого элемента верстки. Она может быть как вертикальной (линией колонки), так и горизонтальной (линия ряда). Располагается по обе стороны от колонки или ряда соответственно. Применяется для привязки grid-элементов.
Grid-ячейка – пространство между соседними грид-линиями. Это простейшая единица сетки. В ней можно разместить один или несколько блоков программного кода.
Grid-полоса – пространство между двумя соседними грид-линиями.
Grid-область – область, которая ограничена 4 грид-линиями. Может включать в себя любое их количество как по горизонтали, так и по вертикали. Называется пространством ячеек. В CSS допускается объединение нескольких ячеек в одну для дальнейшей работы с ними в качестве единого целого.

Grid напоминает Flexbox, но имеет одно существенное отличие. С помощью рассматриваемого «инструмента» верстки допустимо создание двумерных таблиц. Это значит, что в них возможно формирование одновременно и рядов, и колонок. В случае с Flexbox ситуация обстоит иначе. Здесь допустимо встраивать элементы или в столбик, или в единую линию. Сочетание расположения не предусматривается.

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

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

строки;
столбцы;
размеры строк и столбцов;
расположение ячеек;
иные характеристики сетки.

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

Display

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

Сюда же можно отнести еще одно значение, позволяющее создать на странице сетку – inline-grid. Этот компонент ведет себя аналогичным образом, но снаружи он рассматривается в качестве строчного компонента.

Колонки (grid-template-columns)

Grid-template-columns – свойство, с помощью которого можно создать колонки. Достаточно записать их размеры, разделяя информацию пробелами. Размеры допустимо указывать в разнообразных единицах измерения:

пикселях;
сантиметрах;
процентах;
иных единицах.

CSS допускает смешивание нескольких единиц в пределах одного и того же свойства. Для лучшего понимания рассмотренных далее параметров предстоит изучать наглядные примеры формирования CSS grid.

Первый пример – требуется создать три колонки. Первая будет размещаться на 1/3 экрана, вторая – ровно на 100 пикселей, а третья – на все оставшееся пространство. Наиболее простой вариант – это запись размеров при помощи процентов. Выглядит это в программном коде так:

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

Чтобы избавиться от подобных проблем grid-сетка получила новую единицу измерения – фракцию (fr). С ее помощью получается делить все свободное экранное пространство на несколько частей. Верстальщику не придется все время думать над тем, чтобы вручную подгонять проценты.

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

Теперь ячейки будут располагаться согласно задумке. Ни одна из них не будет «уезжать» за пределы контейнера.

Ряды

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

Вот пример реализации рассматриваемого свойства:

Можно заметить, что в предложенном примере размеры двух строк повторяются. Они занимают 2fr. Для экономии пространства в программном коде принято использовать функцию repeat. Она принимает на вход два параметра:

размеры строки во фракциях;
количество повторений.

В программном коде это будет выглядеть так:

grid-template-rows: 3fr repeat(2, 2fr) 1fr;.

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

Области

Grid-template-areas – это одна из особенностей грид-разметки. Рассматриваемый компонент верстки допускает создание областей с гибким регулированием их размеров.

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

В grid-контейнере предстоит сформировать «матрицу» из соответствующих имен:

На экране соответствующий программный код будет выглядеть так:

Каждое имя в grid-template-areas будет соответствовать определенному объекту. Одинаковые имена, стоящие рядом друг с другом, формируют несколько ячеек в единое целое. А именно – в грид-область. В приведенном примере ситуация окажется следующей:

компонент A с «псевдонимом» f занимает 25 ячеек;
B (i) – 9 ячеек;
C (b) – 4 ячейки;
D (o) – 1 ячейка;
E (n) – 1 ячейка.

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

Сокращенное свойство

Grid-template – это так называемое сокращенное свойство. Оно дает возможность задать в краткой форме столбцы со строками или полноценные области. Вот пример короткой записи для создания грид-строк и грид-колонок:

Здесь при помощи всего одной строки удается задать полноценную таблицу – достаточно записать через слеш (/) количество рядов, а также столбцов. Вот пример сетки из трех строк по 1fr и двух столбцов 2fr:

Параметр grid-template может принимать функцию repeat. Здесь она используется точно также, как и в ранее рассмотренных примерах.

А вот сокращенная запись для грид-областей. Чтобы воспользоваться такой формой реализации необходимо объявить свойство grid-area для каждого имеющегося объекта:

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

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

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

с какой линии элемент начинается;
на какой линии компонент должен закончиться.

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

grid-column-start: 1;	Команда, которая задает начальную позицию (линию) столбцов.
grid-column-end: 4;	Указание на конечную позицию столбцов.
grid-column: grid-column-start/grid-column-end;	Объединенная форма записи рассматриваемого свойства. Помогает задать начало и конец столбцов одновременно.

А вот движение элемента на странице по вертикали:

grid-row-start: 1;	Начальная позиция строк.
grid-row-end: 3;	Конечная позиция строк.
grid-row: grid-row-start/grid-row-end;	Объединенная форма записи. С ее помощью можно одновременно задать начало и конец для строк.

У компонентов сайта имеется одно общее свойство. Оно объединяет все 4 основных параметра. Выглядит соответствующее свойство так:

grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end;

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

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

A занимает пространство от 1 до 4 линии – и по горизонтали, и по вертикали.
B располагается от 4 до 6 линии по горизонтали. По вертикали он растянулся от 1 до 3 линии.
C – от 4 до 5 линии по горизонтали, а также от 3 до 4 линии по вертикали.

Оставшиеся элементы располагаются в grid по дефолту.

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

Отступы

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

column-gap – указывает на расстояние между имеющимися колонками в grid;
row-gap – используется для формирования расстояния между строчками grid.

А вот пример того, как соответствующие параметры будут выглядеть в исходном коде:

Grid gap имеет сокращенную форму записи. В ней характеристики column-gap и row-gap записываются через пробел. Выглядит это в программном коде так:

gap: 2% 2%;

Всего ранее изученного мало для полноценной верстки сетки (таблицы) на веб-странице. Внимания требует также выравнивание grid контейнера.

Выравнивание grid

Грид сетка поддерживает множество полезных и простых в плане реализации свойств. Кроме параметров ее элементов каждый верстальщик должен познакомиться с принципами выравнивания компонентов в рамках grid контейнера или области.

Justify-items

Justify-items – параметр в grid, который позволяет выравнивать все элементы в пределах заданной области по горизонтали. Здесь можно использовать следующие команды и коды:

justify-items: stretch; – используется для растягивания компонентов grid во всю ширину ячейки;
justify-items: start; – позволяет расположить элементы в левой части ячейки или заданной области;
justify-items: center; – используется для расположения компонентов в центре grid-ячеек или имеющихся областей;
justify-items: end; – команда, с помощью которой элементы располагаются в правой части ячейки или области на экране.

Существуют также другие параметры grid сетки, отвечающие за выравнивание контейнера. Далее они будут тоже рассмотрены. Эта информация поможет быстрее освоить верстку и создание таблиц на веб-странице.

Align-items

Align-items – параметр, используемый для выравнивания элементов в пределах области по вертикали. Здесь предстоит пользоваться следующими записями:

align-items: stretch; – растягивание элементов на всю длину grid ячейки;
align-items: start; – расположение компонентов в верхней части grid ячейки;
align-items: center; – выравнивание по центру;
align-items: end; – расположение в нижней части ячейки.

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

Justify-content

Justify-content – параметр, который используется для выравнивания составляющих сайта в пределах одного контейнера по горизонтали. В этом случае предстоит пользоваться следующими записями:

justify-content: start; – размещение элементов в левой части контейнера;
justify-content: center; – размещение компонентов по центру grid контейнера;
justify-content: end; – расположение всех элементов в правой части контейнера;
justify-content: space-between – распределение компонентов по правому и левому краям;
justify-content: space-around; – распределение с равным пространством между элементами и половиной соответствующего пространства от краев;
justify-content: space-evenly; – размещение компонентов с равным пространством и между составляющими, и от краев.

Для выравнивания grid контейнеров необходимо запомнить еще одно свойство. Оно позволяет распределить все элементы в пределах грид по вертикали.

Align-content

Align-content – это свойство, с помощью которого можно выравнивать элементы в пределах всего контейнера по вертикали. Здесь помогут следующие программные коды:

align-content: start; – размещение всех компонентов в верхней части grid контейнера;
align-content: center; – выравнивание по центру;
align-content: space-between; – размещение по верхнему и нижнему краям так, чтобы первый компонент был ближе к началу, а последний – к концу;
align-content: space-around; – распределение с равным пространством между компонентами и половиной соответствующего пространства от краев.

Grid элементы тоже предусматривают выравнивание. Для этого используются отдельные команды и параметры.

Выравнивание grid компонентов

При создании CSS сетки необходимо помнить о свойствах, которые работают с отдельными грид-элементами. Далее предстоит работать с компонентом с именем A. Именно он будет выравниваться в таблице.

Первое свойство – это justify-self. Оно используется для выравнивания компонента по горизонтали:

justify-self: stretch; – A растянется по всей длине grid области;
justify-self: center; – A размещается по центру заданной области;
justify-self: start; – A будет расположен в самом начале grid области;
justify-self: end; – размещение A в конце заданной области.

Также предусматривается выравнивание грид-элементов по вертикали. Для этого используется align-self:

stretch – используется для растягивания A по всей ширине grid области;
center – размещение A по центру (в середине) grid области;
start – параметр, с помощью которого можно разместить A в начале grid пространства;
end – размещение в самом конце грид-области.

Всей изученной информации будет достаточно для создания полноценной CSS сетки (таблицы). Этот компонент может предусматривать вложенность.

Вложенность

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

Для основного контейнера в CSS-файле предстоит создать таблицу 3 на 3:

А вот получившийся результат:

Далее для D-элемента предстоит определить display:grid. Внутри D объявляется еще одна HTML-сетка. Для строк и столбцов необходимо воспользоваться параметром subgrid. Он требуется для заимствования параметров родительского грида:

Теперь можно управлять компонентами E, F, G, задавая им различное расположение в пределах D (он тоже стал grid сеткой). Вот пример, благодаря которому E начинается от второй вертикальной линии до третьей:

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

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!