При Интернет-серфинге иногда можно заметить, что на сайте информация располагается аккуратно и адаптируется под параметры задействованного устройства. Такой результат достигается за счет так называемой верстки. Ее необходимо грамотно реализовывать при помощи 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!
