Как сделать отступ в css grid

Добавил пользователь Skiper
Обновлено: 04.10.2024

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

Grid — один из самых мощных модулей CSS. Он нужен для удобного создания шаблонов в CSS и незаменим при создании сайтов, адаптивных блоков, галерей, форм. Возможности для расстановки объектов с CSS Grid безграничны.

Содержание статьи:

Как устроен модуль CSS Grid

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

Чтобы создать макет на основе сетки, необходимо определить grid-контейнер — область с контекстом форматирования, где все дочерние элементы будут размещаться в соответствии с правилами сетки. Для этого необходимо добавить свойство display: grid :

Теперь все потомки элемента становятся grid-элементами, а значит — можно использовать свойства Grid для их позиционирования и выравнивания.

Прежде всего определим количество колонок и строк в сетке. Все они будут образовывать grid-элементы.

Пример грида 4х3 с 12-тью grid-элементами

Главные свойства в CSS Grid для контейнера

Параметры grid-template-columns и grid-template-rows отвечают за количество строк и колонок, а также за их размер. Все параметры в значениях указываются через пробел и означают grid-пути.

Свойства grid-row-gap и grid-column-gap дают возможность создавать промежутки между строками и столбцами. Они определяют размеры grid-линий и могут задаваться в любых единицах измерения CSS — в пикселях или процентах.

Свойства grid-auto-rows и grid-auto-columns определяют размеры автоматически сгенерированных grid-путей. Размер пути может задаваться в любых единицах измерения CSS — в пикселях, процентах или fr (специальной единице измерения для гридов).

Давайте рассмотрим каждое из свойств подробнее.

Grid-template-columns

Свойство grid-template-columns отвечает за добавление колонок. Их ширина может указываться в пикселях, процентах или fr — благодаря ей можно добавлять колонки без указания их конкретной ширины:

1fr 1fr 1fr — означает создание трех колонок одинаковой ширины.

Grid-template-rows

Свойство grid-template-rows помогает добавить строки. Значения свойства разделяются пробелами и определяют высоту строки:

Grid-template-areas

Свойство grid-template-areas создает шаблон сетки с использованием заданных в свойстве grid-area (свойство для grid-элементов) имен grid-областей. Каждая из областей обозначается апострофами.

Grid-template

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

Строки и столбцы разделяются косой чертой.

Grid-row-gap

Свойство grid-row-gap позволяет задать отступы между строками. Ширина указывается разделением строк при помощи grid-row-gap .

Grid-column-gap

Свойство grid-column-gap определяет отступы между колонками. Задается в любых единицах измерения CSS — в пикселях или процентах.

Grid-gap

В значении grid-gap через пробел указываются сразу два параметра — промежутки между строками и между колонками.

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

Свойство grid-gap — это сокращение для grid-column-gap и grid-row-gap .

Justify-items

Свойство justify-items оказывает влияние на все grid-элементы контейнера. Оно предназначено для выравнивания содержимого grid-элемента по оси строки.

start — фиксация содержимого по левому краю области;
center — фиксация содержимого по центру области;
end — фиксация содержимого по правому краю области;
stretch (по умолчанию) — заполнение всей ширины области.

Align-items

Свойство align-items оказывает влияние на все grid-элементы контейнера. Оно предназначено для выравнивания содержимого grid-элемента по оси столбца.

start — фиксация содержимого по верхнему краю области;
center — фиксация содержимого по центру области;
end — фиксация содержимого по нижнему краю области;
stretch (по умолчанию) — заполнение всей высоты области.

Justify-content

Свойство justify-content используется тогда, когда размер сетки превышает размер контейнера. Оно выравнивает грид по оси строки и контролирует элементы, выходящие за пределы.

Align-content

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

Задаваемые значения для align-content и justify-content одинаковы:

start — выравнивание сетки по левому краю контейнера;
center — выравнивание сетки по центру контейнера;
end — выравнивание сетки по правому краю контейнера;
stretch — заполнение всей ширины контейнера;
space-evenly — между каждым элементом добавляется равное пространство, даже по краям сетки;
space-around — между каждым элементом добавляется равное пространство, кроме краев сетки;
space-between — между каждым элементом добавляется равное пространство, но по краям добавляет половину пространства.

Grid-auto-rows

Свойство grid-auto-rows указывает размер строк в контейнере. Может влиять только на те строки, где не указан их размер.

Grid-auto-columns

Свойство grid-auto-columns указывает размер столбцов в контейнере.

Grid-auto-flow

Свойство grid-auto-flow управляет алгоритмом авторазмещения. Необходимо в том случае, когда grid-элементы не были созданы.

Свойство grid устанавливает исходные значения для grid-row-gap и grid-column-gap .

Это сокращенное свойство для:

grid-template-columns ;
grid-auto-columns ;
grid-template-rows ;
grid-auto-rows ;
grid-template-areas ;
grid-auto-flow .

Пример с grid-auto-flow :

Гайд по созданию Grid

Код для создаваемого грида 3х3 имеет вид:

grid-template-rows: 1fr 1fr 1fr — строки в сетке;
grid-template-columns: 1fr 1fr 1fr — колонки в сетке;
grid-gap: 2vw — отступы между элементами;
стили grid-элементов:

Сама сетка имеет небольшие отступы между элементами.

Отступы между элементами в сетке

В этом случае разметка HTML будет следующей:

— grid-контейнер, а это значит, что все элементы в нем являются grid-элементами. Чтобы HTML стал гридом, применим CSS:

В CSS указан display: grid , что превращает элемент в контейнер Grid.

Чтобы сократить код, можно использовать функцию repeat() для всех значений размера элемента. К примеру, grid-template-rows: 1fr 1fr 1fr 1fr 1fr легко сокращается до grid-template-rows: repeat(5, 1fr) .

В заключение

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

CSS Grid Layout появился в 2017 году и уже стал неотъемлемым инструментом для фронтенд-разработчиков. Его использование упрощает их работу.

Модуль CSS Grid состоит из большого количества свойств. Я разбил их на логические группы, чтобы было проще понять что за что отвечает и как использовать.

1. Введение в CSS Grid. Разбираемся с терминологией

Вводное видео в модуль CSS Grid. В нем разберемся с основными понятиями, о которых нужно знать при работе с Grid CSS. В рамках этого видео вы узнаете что такое grid контейнер (grid container), что такое grid элемент (grid item). Так же, мы поговорим о поддержке грид современными браузерами. Вы узнаете о таких понятия как grid line - линия грида, grid cell - ячейка, grid area - область, grid track.

2. ГЛАВНЫЕ свойства в CSS Grid

В этом видео разбираемся со свойствами, которые отвечают за Шаблон, за то, как сетка должна выглядеть в Grid CSS: количество строк/колонок, ширина и высота ячеек. Познакомимся с укороченной записью, а так же, затронем свойство относящееся к грид элементу.

3. Позиционирование ячеек в CSS Grid

Поскольку CSS Grid - двумерная сетка, то в ней можно располагать ячейки в 2х мерном пространстве, как по оси X, так и по оси Y. В этом видео я покажу, как можно позиционировать отдельно взятый грид элемент (grid item). Все свойства в этом видео относятся к grid item, а не к контейнеру (grid container).

4. Генерация строк и колонок в CSS Grid. Алгоритмы построения сетки

Свойства grid-auto-columns / grid-auto-rows позволяют сгенерировать размеры для строк и колонок, которые не были определены при определении шаблона. Свойство grid-auto-flow позволяет менять алгоритм выстраивания грид элементов в рамках контейнера.

5. Пишем МЕНЬШЕ со свойством grid

Свойство grid является укороченной записью для ряда свойств, которые мы с вами рассмотрели в предыдущих видео. Оно может принимать несколько значений в различных вариациях и работает с такими свойствами как grid-template, grid-template-rows, grid-auto-columns, grid-template-columns и не только.

6. Выравнивание ЯЧЕЕК внутри Grid контейнера

Свойства justify-content / align-content / place-content предназначены для выравнивания ячеек по горизонтали и вертикали в рамках грид контейнера (grid container).

7. Выравнивание КОНТЕНТА внутри ячеек в модуле CSS Grid

Свойства justify-items и align-items служат для выравнивания контента внутри ячеек. justify-items служит для горизонтального выравнивания. align-items служит для вертикального выравнивания. place-items является укороченной записью для обоих этих свойств.

8. КАК выровнять контент в отдельной ячейке в CSS Grid?

Свойство justify-self служит для горизонтального выравнивая контента внутри отдельно взятой ячейки. Свойство justify-self служит для вертикального выравнивая контента внутри отдельно взятой ячейки. Если вам требуется выровнять контент внутри отдельно взятой ячейки одновременно по горизонтали и по вертикали, вы можете воспользоваться укороченной записью - place-self.

9. Задаём ОТСТУПЫ между ячейками в CSS Grid

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

У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых раньше мы могли только мечтать. В прошлый раз мы говорили о CSS-сетке Grid. Сегодня мы её будем настраивать.

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

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

Готовим шаблон

Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:

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

Вот что у нас получается, если у сетки не задавать никаких параметров:

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

Формируем строки и столбцы

Давайте посмотрим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.

Сделаем в сетке три колонки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

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

Смотрите, высота поменялась только у первой строки. Остальные остались той же высоты, что и раньше, потому что мы указали только один параметр в команде grid-template-rows. Сделаем 5 строк одинаковой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

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

Чтобы не писать пять раз подряд размер 50px, можно использовать такую команду:

grid-template-rows: repeat(5, 50px);

Она повторяет нужный нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — сделаем 4 одинаковые колонки используя функцию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Теперь сделаем так:

поставим три строки вместо пяти;
последнюю строку растянем вниз до конца окна — используем для этого 1fr;
столбцы сделаем одинаковой ширины.

Запишем это в разделе со стилями:

grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);

Кажется, что 1fr, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, ошибки тут нет, смотрите, что произошло на самом деле:

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

Чтобы сетка растянулась по высоте на всё окно, используют относительные единицы, например, vh — она указывает, сколько процентов от высоты окна будет занимать элемент. Чтобы растянуть сетку до края, напишем:

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

Если нам нужно сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:

height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;

Теперь у нас получился красивый шаблон на 12 ячеек:

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

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

Что дальше

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

Вся документация по свойству grid находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 11-ти дневный марафон Grid CSS

display

inline-grid

subgrid

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

Применяется ко: всем элементам.

grid формирует сетку как блок. inline-grid формирует сетку как строчный блок. subgrid если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный.

justify-items

start

center

stretch

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

Наследуется: нет.

Применяется ко: всем элементам.

Значение по умолчанию: legacy.

start выравнивает содержимое по левой стороне области. end выравнивает содержимое по правой стороне области. center выравнивает содержимое по центру области. stretch заполняет всю ширину области (по умолчанию).

align-items

start

center

stretch

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

Наследуется: нет.

Применяется ко: всем элементам.

Значение по умолчанию: normal.

start выравнивание элементов по верхней части области. end выравнивание элементов по нижней части области. center выравнивание элементов по центру области. stretch заполняет всю высоту области (по умолчанию).

justify-content

start

center

stretch

space-between

space-around

space-evenly

Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца)

Наследуется: нет.

Применяется к: block контейнерам, flex контейнерам и grid контейнерам.

Значение по умолчанию: normal.

start выравнивает сетку по левой стороне контейнера. end выравнивает сетку по правой стороне контейнера. center выравнивает сетку по центру контейнера. stretch масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера. space-around одинаковое пространство между элементами, и полуразмерные отступы по краям. space-between одинаковое пространство между элементами, без отступов по краям. space-evenly одинаковое пространство между элементами, и полноразмерные отступы по краям.

Читайте также: