Обзорная статья по CSS Grid
Красным показаны горизонтальные линии 1 и 2, в синим вертикальные 2 и 3:
По аналогии с прошлым примером, красным выделена горизонтальная дорожка №3, а синим вертикальная тоже №3.
Ячейка, это любая клетка ограниченная двумя линиями.
Область, это несколько ячеек образующих прямоугольник.
Управление расположением
Для создания сетки нужно условность свойство display в grid или inline-grid.
Далее нужно указать как должна формироваться структура сетки, для этого используются свойства grid-template-columns и grid-auto-rows.
Их синтаксис довольно прост, рассмотрим его на примере колонок.
Допустим, нам требуется сделать две колонки, у которых первая примерно в два раза больше второй. Тогда нужно перечислить ширину каждой ячейки по очереди:
grid-template-columns: 70% 30%;
— и все, третий элемент автоматически будет перенесен на новую строку.
Специально для сеток css grid появилась новая единица измерения fr (фракция), по своей сути она похожа на проценты, но позволяет более красиво задать отношения между шириной или высотой ячеек.
Если нам, как и в прошлом примере, требуется чтобы одна колонка была в два раза больше второй, то записывается это просто:
grid-template-columns: 2fr 1fr;
Если нам нужно, чтобы первая колонка была маленькой, второй большой и последняя средней, то можно задать такое соотношение:
grid-template-columns: 1fr 3fr 2fr;
Учитывая, что может потребоваться, например, 12 ячеек одинакового размера, то можно использовать функцию повтора. Также ее можно комбинировать с обычными единицами, скажем, если 13 колонка должна быть 50 пикселей:
grid-template-columns: repeat(12, 1fr) 50px;
Также есть функция, позволяющая задать размер ячейки в зависимости от его контента, но не меньше переданного занчения:
grid-template-columns: 1fr fit-content(400px) 1fr;
И еще, не менее удобной и полезной функцией, является minmax, она позволяет задать минимальный и максимальный размер ячейки:
grid-auto-rows: minmax(150px, auto);
Со строками все тоже самое, но стоит обратить внимание на термин «Неявная сетка«.
Проще его понять на примере, допустим у нас задана ширина для двух колонок и высота для 3 рядов:
grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr);
тогда первые 6 ячеек будут расположены как указано, но что будет с 7 и последующими?
Они пойдут новым и рядами, но их высота будет выставлена в auto (значение по умолчанию) и как раз они будут считаться как элементы неявной сетки.
Это далеко не всегда удобно, поэтому существует свойство grid-auto-rows, оно позволяет выставить значения таким элементам сетки.
Пример общего кода:
.grid < display: grid; /* grid-template-columns: 70% 30%; grid-template-columns: 2fr 1fr; */ grid-template-columns: repeat(3, 1fr) 2fr; /* Высота всех блоков: grid-auto-rows: 150px; */ grid-auto-rows: minmax(150px, auto); >
Также можно ознакомиться с несколькими примерами, например, с тем, что можно внутри одной сетки расположить другую (вложенную) сетку или с тем, как ячейки могут накладываться друг на друга.
Grid template
Шаблоны сетки позволяют «визуально описать» какие области и как буду отображены на экране.
Допустим, нам нужно сделать заготовку для стандартного шаблона:
шапка — занимающая все пространство
контент и сайд бар — две неравных колонки занимающие всю строку
подвал — как и шапка, занимает все пространство
Для этого нужно задать ячейкам имена, через свойство grid-area:
.header
а затем описать как эти области будут выведены, используя grid-template-areas:
grid-template-areas: "header header" "main side" "footer footer" ;
.header < grid-area: header; >.footer < grid-area: footer; >.side < grid-area: side; >.main < grid-area: main; >.grid
Стоит отметить, что одна область может занимать не только несколько ячеек в ряду, но и несколько ячеек в колонке:
grid-template-areas: "header side" "main side" "footer footer" ;
но изогнуть область нельзя, она всегда должна оставаться прямоугольной.
Если же требуется оставить какие-то ячейки пустыми, то можно прописать в них любое несуществующее имя, например, none
Короткой записью для grid-template-areas и grid-template-columns, является grid-template:
.grid < display: grid; grid-template: "header side" "main side" "footer footer" / 2fr 1fr; >
Размещение ячеек и областей внутри сетки
grid-area позволяет задать с какой линии по какую будет занимать область.
grid-area, это короткая запись для свойств:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
При этом стоит обратить внимание на порядок их перечисления:
grid-area: 1 / 2 / 3 / 4; grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;
Предположим, что нам нужно растянуть одну ячейку на всю ширину сетки:
Тогда мы можем явно задать с какой по какую линию колонок должна занимать область:
Другой вариант, можно задать на сколько линий нужно расшириться, для этого используется span:
Также стоит отметить, что необязательно конечная позиция должна быть больше начальной, пример вполне валидной записи:
Также есть еще одна отличная возможность — задавать имена определенным линиям:
.grid < display: grid; grid-template-columns: [col_start] 1fr 1fr 1fr [col_middle] 1fr 1fr 1fr [col_end]; grid-template-rows: [row_start] 1fr 1fr [row__middle] 1fr 1fr [row_end]; grid-gap: 1em; >.c0 < grid-column: col_start / col_end; >
Несколько примеров для наглядности.
Выравнивание и позиционирование
Ориентация сетки:
Свойство grid-auto-flow позволит указать как стоить таблицу (по аналогии со свойством flex-direction для flexbox).
- row — значение по умолчанию, новые ячейки заполняют каждую строку поочередно, добавляя новые строки по мере необходимости.
- column — соответственно, сначала заполняются строки.
- dense — алгоритм пытается распределить ячейки так, что бы они занимали минимальное место.
Выравнивание строк / столбцов:
justify-items — горизонтальное выравнивание столбцов сетки.
align-items — вертикальное выравнивание рядов сетки.
Также есть можно использовать place-items, для краткой записи:
place-items: "align-items justify-items";
Выравнивание отдельной ячейки:
justify-self — горизонтальное положение ячейки внутри сетки.
align-self — вертикальное положение.
place-items: "align-self justify-self";
Выравнивание контента внутри ячейки:
Внимание: учитывая, что свойство display: grid не наследуется, для самой ячейки его тоже нужно явно задать.
Свойства работают по аналогии:
justify-content
align-content
Если нужно разместить содержимое ячейки по центру, то можно использовать:
.grid > .c5
— тогда не требуется задавать display: grid
Отствупы:
Если нужно задать отступы между ячейками, что вместо margin стоит использовать grid-gap:
.grid
«Рецепты»
space-around
У Flexbox, из коробки, есть красивое поведение при использовании
justify-content: space-around;
У Grid такого же эффекта можно добиться так:
display: grid; grid-template-columns: repeat(4, 50px); justify-items: center; justify-content: space-around;
Основной момент, это ограничение ширины ячеек через grid-template-columns, без этого ячейки растягиваются (stretch) на всю ширину и justify-content: space-around; визуально ничего не меняет.
Основные элементы сетки Grid
Grid — это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS.
Это двумерная система, то есть она может обрабатывать как столбцы, так и строки, в отличие от flexbox, который в значительной степени является одномерной системой. Вы работаете с макетом сетки, применяя правила CSS как к родительскому элементу (который становится контейнером сетки), так и к дочерним элементам этого элемента (которые становятся элементами сетки).
Flexbox и Grid на самом деле очень хорошо работают вместе
По состоянию на 2020 год все браузеры поддерживают CSS Grid — кроме говнобраузера!
Основные элементы сетки Grid:
Grid container — блок в котором находятся grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.
Grid Item — Дочерние элементы (то есть прямые потомки) контейнера сетки. Элементы item являются элементами сетки, а подэлемент (sub-item) — нет!.
Grid lines — Разделительные линии, составляющие структуру сетки. Они могут быть вертикальными («линии сетки столбцов») или горизонтальными («линии сетки столбцов») и находиться по обе стороны от строки или столбца. Здесь желтая линия является примером линии сетки столбца.
* Важный нюанс, данный элемент восприимчив к режиму написания, который используется на вашем ресурсе. Например, вы используете Арабский язык или любой другой язык у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.
Grid cell — это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.
Пространство между двумя соседними строками и двумя соседними линиями сетки столбцов. Это единый «блок» сетки. Вот ячейка сетки между линиями сетки строк 1 и 2 и линиями сетки столбцов 2 и 3.
Grid track — это пространство между двумя смежными grid линиями, вертикальными или горизонтальными. Вы можете думать о них как о столбцах или строках сетки. Вот дорожка сетки между линиями сетки второго и третьего рядов.
Grid area — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.
Общая площадь окружена четырьмя линиями сетки. Область сетки может состоять из любого количества ячеек сетки. Вот область сетки между линиями сетки строк 1 и 3 и линиями сетки столбцов 1 и 3.
===
Grid — один из самых мощных CSS-модулей, когда-либо представленных до 2020 года!
CSS Grid для новичков: создание сетки и адаптивный дизайн
В CSS Grid, �� grid tracks – это как пути для поездов, только для контента: пространства между линиями, где «живут» колонки и ряды. Их размеры легко настраиваются, делая веб-страницу гибкой и адаптивной. ��✨
Grid tracks решают проблему жесткой структуры веб-страниц. Вместо того, чтобы «выбиваться» из общего потока, они позволяют контенту гармонично адаптироваться под любой экран. Это делает сайты красивыми на всех устройствах ��️�� и упрощает написание программ. Знание о grid tracks облегчает создание адаптивных дизайнов, что невероятно важно в эру мобильных технологий. ��✨
Пример
Допустим, вы хотите создать веб-страницу для своего личного блога, где будут размещены статьи, меню и боковая панель с контактной информацией. Используя CSS Grid Layout, вы можете легко организовать эти элементы на странице без необходимости вносить изменения в HTML-структуру.
Скопировать код
.container < display: grid; grid-template-columns: 1fr 3fr 1fr; /* Создаем три колонки */ grid-gap: 20px; /* Отступ между колонками и рядами */ >.menu < grid-column: 1 / 2; /* Меню занимает первую колонку */ >.articles < grid-column: 2 / 3; /* Статьи занимают вторую колонку */ >.sidebar < grid-column: 3 / 4; /* Боковая панель занимает третью колонку */ >Скопировать код
В этом примере мы использовали CSS Grid Layout для создания трех колонок: меню ( 1fr ), основного контента со статьями ( 3fr ) и боковой панели ( 1fr ). Использование единицы fr позволяет нам распределить доступное пространство так, чтобы основной контент занимал больше места, а меню и боковая панель — меньше. grid-gap добавляет отступы между колонками и рядами, делая дизайн более читаемым и приятным.
Этот пример показывает, как легко и быстро можно организовать содержимое веб-страницы, используя grid tracks, и решить проблему размещения различных элементов без сложных манипуляций с HTML или использования внешних библиотек.
Первые шаги в мире CSS Grid
Основы CSS Grid – это ваш первый шаг к созданию современных веб-страниц. Понимание того, что такое grid tracks, открывает двери к более гибкому и адаптивному дизайну. Grid tracks – это основные «кирпичики» сетки, определяющие структуру вашего контента. ��️��
Как создать сетку: колонки и ряды
Создание сетки в CSS начинается с использования свойств grid-template-columns и grid-template-rows . Эти свойства позволяют вам точно указать, как много места займет каждый элемент на странице. ����️
Пример:
Скопировать код
.container
В этом примере контейнер разделен на три колонки: первая имеет фиксированную ширину 200px, вторая и третья колонки занимают оставшееся пространство, но третья в два раза шире второй. Ряды адаптируются автоматически под содержимое ( auto ).
Единицы измерения: fr и auto
Единицы измерения в CSS Grid играют ключевую роль в создании адаптивных макетов. fr (fraction) распределяет доступное пространство между колонками или рядами, а auto адаптируется к размеру содержимого. Это делает ваш дизайн гибким и отзывчивым. ����
Адаптивный дизайн с помощью CSS Grid
Адаптивный дизайн с CSS Grid – это не просто тренд, а необходимость. CSS Grid позволяет вашему сайту выглядеть отлично на любом устройстве, будь то мобильный телефон, планшет или десктоп. Используя grid-template-areas и медиа-запросы, вы можете легко изменять расположение и размеры блоков в зависимости от размера экрана. ������️
CSS Grid vs Flexbox: когда что использовать
Хотя CSS Grid и Flexbox могут казаться похожими, они служат разным целям. Flexbox идеально подходит для одномерных макетов, когда вам нужно расположить элементы в ряд или колонку. CSS Grid же предназначен для двумерных макетов, позволяя управлять расположением элементов как по горизонтали, так и по вертикали. Используйте Flexbox для компонентов внутри grid-элементов, чтобы достичь максимальной гибкости и удобства в дизайне. ��️��
Заключение
CSS Grid для новичков – это мощный инструмент для создания веб-страниц, который делает процесс разработки более интуитивным и менее трудоемким. Освоив основы CSS Grid и поняв, как использовать grid tracks, вы сможете создавать сложные адаптивные макеты, которые будут идеально смотреться на любых устройствах. Начните экспериментировать с CSS Grid уже сегодня и откройте для себя новые возможности в веб-дизайне! ����
Разница между явными и неявными гридами
Grid Layout наконец-то дает нам возможность определять сетки в CSS и размещать элементы в ячейках сетки. Само по себе это здорово, но тот факт, что нам не нужно указывать каждую дорожку и нам не нужно размещать каждый элемент вручную, делает новый модуль еще лучше. Сетки достаточно гибкие, чтобы адаптироваться к своим элементам.
Все это обрабатывается так называемой явной и неявной сеткой.
Явные сетки
Мы можем определить фиксированное количество строк и дорожек, которые образуют сетку, используя свойства grid-template-rows , grid-template-columns и grid-template-areas . Эта определенная вручную сетка называется явной сеткой.
.grid
Повторение треков
Когда мы определяем grid-template-columns: 1fr 1fr 1fr 1fr; , мы получаем четыре вертикальных трека, каждая шириной 1fr . Мы можем автоматизировать это, используя такие обозначения grid-template-columns: repeat(4, 1fr); . Первый аргумент указывает количество повторов, второй — список треков, который повторяется это количество раз.
Трек — лист? Да, вы действительно можете повторять несколько треков.
Автоматический повтор треков
Обозначение повторения весьма полезно, но его можно автоматизировать еще больше. Вместо того чтобы устанавливать фиксированное число повторений мы можем использовать ключевые слова auto-fill и auto-fit .
Автозаполнение треков
Ключевое слово auto-fill создает так много треков , как вписываться в контейнер сетки, не вызывая его переполнение.
.grid
Обратите внимание, что repeat(auto-fill, 1fr); будет создана только одна дорожка, потому что одна дорожка с шириной 1fr , уже заполняющей весь контейнер сетки, является недопустимым объявлением (может быть, оно изменилось? Я не знаю).
Автоматическая подгонка треков
Ключевое слово auto-fit ведет себя так же, как auto-fill , за исключением того, что после размещения элемента сетки будет создавать только количество дорожек, которые необходимы.
.grid
В примере, используемом в этом разделе, сетка будет выглядеть одинаково с repeat(auto-fit, 100px); и repeat(4, 100px); . Разница видна, когда элементов сетки больше 4.
Если элементов больше, auto-fit создает больше столбцов.
С другой стороны, если в нотации повторения используется фиксированное количество вертикальных дорожек и количество элементов превышает это значение, добавляются дополнительные строки.
Я использовал grid-template-columns в приведенных выше примерах для удобства, но все правила применимы и к grid-template-rows .
.grid < display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-template-rows: repeat(auto-fill, 100px); grid-gap: 20px; height: 100%; >html, body
Неявные сетки
Если элементов сетки больше, чем ячеек в сетке, или когда элемент сетки размещается за пределами явной сетки, контейнер сетки автоматически создает дорожки сетки, добавляя линии сетки в сетку. Явная сетка вместе с этими дополнительными неявными дорожками и линиями образует так называемую неявную сетку.
.item:first-child < grid-column-start: -1; >.item:nth-child(2)
Ширина и высота неявных дорожек устанавливаются автоматически. Они достаточно велики, чтобы соответствовать размещенным элементам сетки, но это поведение по умолчанию можно изменить.
Определение размера неявных дорожек
Свойства grid-auto-rows и grid-auto-columns дают нам контроль над размером неявных дорожек.
.grid
Неявные дорожки теперь всегда будут иметь ширину 200px и высоту 60px , независимо от того, подходит ли элемент сетки или нет.
Вы можете сделать размер неявных дорожек более гибким, указав диапазон с помощью нотации minmax() .
.grid
Неявные дорожки теперь имеют ширину не менее 200 пикселей и высоту 60 пикселей, но будут расширяться, если этого требует контент.
Расширение сетки до начала
Неявные треки нельзя просто добавить в конец явной сетки. Также может случиться так, что явную сетку нужно расширить до начала.
.item:first-child < grid-row-end: 2; grid-row-start: span 2; >.item:nth-child(2)
Каждый элемент заканчивается на второй строке и занимает 2 ячейки (одну по вертикали, другую по горизонтали). Поскольку перед второй линией находится только одна ячейка, в сетку в начале каждой стороны добавляется еще одна неявная дорожка.
Автоматическое размещение
Как уже упоминалось, неявные треки также добавляются, если количество элементов превышает количество ячеек. По умолчанию алгоритм автоматического размещения размещает элементы, последовательно заполняя каждую строку, добавляя новые строки по мере необходимости. Мы можем указать, как автоматически размещенные элементы перетекают в сетку, используя свойство grid-auto-flow .
.grid
Вместо строк столбцы заполняются элементами и создаются дополнительные неявные столбцы.
Не определять явную сетку
В связи с тем, что можно автоматически определять размер ячеек с помощью, grid-auto-rows и grid-auto-columns не обязательно определять явную сетку.
.grid < display: grid; grid-auto-columns: minmax(60px, 200px); grid-auto-rows: 60px; grid-gap: 20px; >.item:first-child < grid-row: span 2; >.item:nth-child(2) < grid-column: 1 / span 2; >.item:nth-child(5)
Если полагаться исключительно на неявную сетку, то в сочетании с явным размещением может возникнуть путаница и трудность для понимания. В этом примере первый элемент размещается auto и занимает 2 строки, второй элемент размещается явно в первом столбце и занимает 2 столбца, образуя вторую вертикальную дорожку. Третий и четвертый элементы фактически будут автоматически помещены в четвертую строку, но пятый элемент будет явно помещен в ранее несуществующий третий столбец. Это создает третью вертикальную дорожку, и из-за автоматического размещения сетки третий элемент перемещается на строку вверх, заполняя пространство.
Заключение
Эта статья не охватывает всего, что нужно знать о явной и неявной сетке, но она должна дать вам больше, чем твердое понимание концепции. Знание того, почему и как создаются неявные линии и треки, жизненно важно для работы с Grid Layout.