Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>13 мар 2023</li>

3 <li>0</li>

4 </ul>Знакомимся с самой гибкой и современной разметкой CSS.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Программист, музыкант. Знает Java, C# и Unity3D, но не собирается останавливаться на достигнутом.

7 При просмотре разных сайтов в интернете можно заметить, как аккуратно располагаются на них элементы независимо от размера экрана: навигация, кнопки, блоки с текстом и другие вещи. За это отвечает язык разметки CSS (Cascading Style Sheets). Она бывает разных видов, но сегодня поговорим об одном из них, самом адаптивном -CSS-гридах.

8 Из этой статьи вы узнаете:

9 <ul><li><a>Что такое CSS Grid</a></li>

10 <li><a>Как его создать</a></li>

11 <li><a>Какие свойства есть у грид-контейнера</a></li>

12 <li><a>А какие - у грид-элементов</a></li>

13 <li><a>Как задать отступы между элементами</a></li>

14 <li><a>Как выровнять сразу все элементы в грид-контейнере</a></li>

15 <li><a>Как выровнять отдельные элементы</a></li>

16 <li><a>Что такое вложенные гриды</a></li>

17 <li><a>Что нужно запомнить</a></li>

18 </ul>Grid (сетка) - это вид разметки, в котором элементы на сайте расположены в виде таблицы. Главная фишка этой таблицы в гибкости - можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними. А ещё гриды хорошо приспосабливаются к разным размерам экрана, что делает их адаптивными.

19 Структура грида напоминает обычный Excel-файл: есть горизонтальные и вертикальные линии, которые вместе образуют много разных ячеек. Только, в отличие от файла в Excel, внутри ячеек находятся не выгрузки по зарплате за март, а элементы сайта: текст, картинки, кнопки, блоки HTML-кода и так далее. А формально все эти части грид-разметки называются так:

20 <ul><li>grid-контейнер - самый главный элемент во всей разметке, в нём хранится всё содержимое сетки;</li>

21 <li>grid-ячейка - единица грид-сетки, сюда можно положить один или несколько блоков кода;</li>

22 <li>grid-линия - горизонтальная или вертикальная линия, разделяющая столбцы и колонки;</li>

23 <li>grid-строка (row) - ряд ячеек;</li>

24 <li>grid-столбец (column) - колонка ячеек;</li>

25 <li>grid-элемент - какой-либо элемент сайта;</li>

26 <li>grid-область (area) - пространство из ячеек, в CSS можно объединить несколько ячеек в одну и работать с ними как с единым целым.</li>

27 </ul>А вот как они располагаются на схеме:

28 Изображение: Skillbox MediaВ отличие от Flexbox - другого популярного вида CSS-разметки - Grid позволяет создавать двумерные таблицы. Это значит, что в них могут быть одновременно и ряды, и колонки. А во Flexbox всё строго: можно выстроить элементы или в столбик, или в линию - сочетать оба метода нельзя.

29 Чтобы опробовать Grid в деле, нам понадобится два файла: HTML и CSS. Начнём со "скелета" - создадим HTML-файл вот с таким содержимым (для удобства это можно сделать в <a>онлайн-редакторе</a>):

30 <head> <title>CSS Grid Layout</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div class="container"> <div class="A">A</div> <div class="B">B</div> <div class="C">C</div> <div class="D">D</div> <div class="E">E</div> </div> </body>Здесь мы задали несколько простых объектов - обычные латинские буквы A, B, C, D и E - и расположили их на отдельных строчках.

31 Теперь настало время объявить саму сетку. Для этого в той же папке создадим файл style.css и поместим туда вот такой код:

32 /* Объявляем grid-контейнер */ .container { /* Задаём свойства элементов HTML-класса "контейнер" */ display: grid; /* Режим отображения меняем на "сетку" */ }Пока что ничего не изменилось - чтобы нашу сетку было видно, добавим ей стили: контейнер обведём зелёным цветом, а все элементы внутри него - чёрной штрих-пунктирной линией.

33 /* Добавляем оформление grid-контейнеру: */ .container { border: 2px solid rgb(80, 145, 27); /* Обводим зелёной линией */ border-radius: 5px; /* Скругляем углы на 5 пикселей */ } /* Добавляем оформление элементам grid-контейнера: */ .container * { border: 1px dashed; /* Обводим чёрным пунктиром */ border-radius: 10px; /* Скругляем углы на 10 пикселей */ background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */ text-align: center; /* Контент размещаем в центре по горизонтали */ } /* Для разделения действий мы несколько раз объявили один и тот же элемент .container. На самом деле все эти блоки - единое целое, и относятся к одному классу - container. */Должно получиться примерно так:

34 Изображение: Skillbox MediaУже лучше! Но пока наши элементы расположены по дефолту и какой-то гибкой вёрсткой тут и не пахнет. Чтобы научиться настраивать сетку под себя, разберёмся со свойствами гридов.

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

36 Чтобы создать колонки, нужно просто записать их размеры через пробел. Размеры можно указывать в разных единицах измерения: пикселях, процентах, сантиметрах и так далее. Причём можно смешивать несколько единиц в пределах одного свойства.

37 Допустим, нам нужно создать три колонки: первая занимает одну треть экрана, вторая - ровно 100px, а третья - всё оставшееся место. Самый очевидный вариант - записать через проценты:

38 .container { display: grid; grid-template-columns: 30% 100px 70%; }Но тогда общая ширина всех колонок превысит 100%, и третья колонка уедет за пределы контейнера:

39 Изображение: Skillbox MediaЧтобы избегать таких ситуаций, гридам придумали новую единицу измерения - фракцию (fr). Она позволяет разделить свободное пространство экрана на несколько частей и не возиться с ручной подгонкой процентов.

40 А нам того и надо - первому столбцу отдаём одну часть свободного пространства (1fr), третьему - две (2fr), а тот, что посередине, пускай забирает свои 100px:

41 .container { display: grid; grid-template-columns: 1fr 100px 2fr; }И вот какая получается красота - всё аккуратно и в рамочке:

42 Изображение: Skillbox MediaЕдем дальше. Захотели мы, допустим, задать нашей табличке размеры строк:

43 .container { display: grid; grid-template-rows: 3fr 2fr 2fr 1fr; }Но вдруг видим, что размеры двух строчек повторяются - они занимают ровно 2fr. Чтобы не писать дважды одно и то же, поместим их в функцию repeat. Она принимает на вход два параметра - размер строки во фракциях и количество его повторений:

44 grid-template-rows: 3fr repeat(2, 2fr) 1fr;И полная, и краткая запись уместны - их можно чередовать в зависимости от контекста. Например, в нашем случае без функции можно было бы обойтись - но если надо создать, допустим, 10 колонок, она помогла бы сделать код более лаконичным и читаемым.

45 Вот как работает функция repeat наглядно:

46 Изображение: Skillbox MediaОбратите внимание:высоту последней строчки E мы нигде не указывали, поэтому она остаётся дефолтной.

47 Одна из особенностей грид-разметки - возможность создавать области и гибко регулировать их размеры.

48 Чтобы создать область, объявим для каждого элемента в CSS-файле свойство grid-area - его параметром будет любое имя, какое захотите. Можно просто добавить в любое место CSS-файла этот код:

49 .A { grid-area: f; } .B { grid-area: i; } .C { grid-area: b; } .D { grid-area: o; } .E { grid-area: n; }Затем в грид-контейнере создаём "матрицу" из этих имён:

50 .container { display: grid; grid-template-areas: "f f f f f i i i" "f f f f f i i i" "f f f f f i i i" "f f f f f o b b" "f f f f f n b b"; }Вуаля! Наши элементы выстроились по шаблону:

51 Изображение: Skillbox MediaКак это работает.Каждое имя в grid-template-areas соответствует определённому объекту. Одинаковые имена, стоящие рядом, собирают несколько ячеек в единое целое - то есть в грид-область:

52 <ul><li>ЭлементAс "псевдонимом"fзанимает область в 25 ячеек.</li>

53 <li>ЭлементB (i) - в 9 ячеек.</li>

54 <li>ЭлементC (b) - в 4 ячейки.</li>

55 <li>ЭлементD (o) - в 1 ячейку.</li>

56 <li>ЭлементE (n) - тоже в 1 ячейку.</li>

57 </ul>Свойство grid-template позволяет в краткой форме определить или столбцы со строками, или целые области.

58 1.Короткая форма для грид-строк и грид-колонок:

59 /* Сетка из строк и столбцов */ grid-template: grid-template-rows / grid-template-columns;Фишка в том, что мы всего одной строчкой создаём целую таблицу - просто записываем через слеш количество рядов и столбцов. Для примера создадим сетку из трёх строк по 1fr и двух столбцов по 2fr.

60 .container{ display: grid; grid-template: 1fr 1fr 1fr / 2fr 2fr; }Изображение: Skillbox MediaКстати, свойство grid-template тоже принимает функцию repeat.

61 .container{ display: grid; grid-template: repeat(3, 1fr) / repeat(2, 2fr); }И, как видите, результат остаётся неизменным:

62 Изображение: Skillbox Media2.Короткая форма для грид-областей.

63 Также сокращённая запись поддерживает объявление грид-областей, нужно только объявить свойство grid-area для каждого объекта:

64 .container { display: grid; grid-template: "f f f i i" "f f f i i" "f f f b o" ". . n n n"; } .A { grid-area: f; } .B { grid-area: i; } .C { grid-area: b; } .D { grid-area: o; } .E { grid-area: n; }Профит:

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

66 Изображение: Skillbox MediaВот так можно двигать элемент по горизонтали:

67 Задаёт начальную позицию (линию) столбцов

68 Задаёт конечную позицию (линию) столбцов

69 grid-column: grid-column-start / grid-column-end;Объединённое свойство грид-линий столбцов: начало и конец

70 А вот так - по вертикали:

71 Задаёт начальную позицию (линию) строк

72 - Задаёт конечную позицию (л��нию) строк

72 + Задаёт конечную позицию (линию) строк

73 grid-row: grid-row-start / grid-row-end;Объединённое свойство грид-линий строк: начало и конец

74 Но есть и одно общее свойство, объединяющее все четыре основных:

75 grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;Теперь давайте попробуем задать эти свойства первым трём элементам из нашей конструкции с буквами:

76 /* Объявляем грид 5 × 3 */ .container { display: grid; grid-template: repeat(3, 1fr) / repeat(5, 1fr) ; } /* Расставляем первые три элемента: A, B и C */ .A { grid-area: 1 / 1 / 4 / 4; } .B { grid-column-start: 4; grid-column-end: 6; grid-row-start: 1; grid-row-end: 3; } .C { grid-column: 4 / 5; grid-row: 3 / 4; }Этот код указывает нашим буквам, какие позиции занять в сетке:

77 <ul><li>Элемент А занял область от первой до четвёртой линии - и по горизонтали, и по вертикали.</li>

78 <li>Элемент B занял область от четвёртой до шестой линии по горизонтали и от первой до третьей по вертикали.</li>

79 <li>Элемент С занял область от четвёртой до пятой линии по горизонтали и от третьей до четвёртой линии по вертикали.</li>

80 <li>Ну а остальные расположились по дефолту :)</li>

81 </ul>Выглядит так:

82 Изображение: Skillbox MediaИспользуя grid-gap, можно регулировать интервалы между элементами в контейнере. Делается это с помощью двух параметров:

83 <ul><li>column-gap - расстояние между колонками;</li>

84 <li>row-gap- расстояние между строками.</li>

85 </ul>Вот как это выглядит в коде:

86 .container { column-gap: 1%; row-gap: 1%; }Как и у grid-template, у gap есть сокращённая запись, где параметры column-gap и row-gap можно записать через пробел:

87 gap: 1% 1%;Изображение: Skillbox MediaСо свойствами элементов разобрались, теперь поговорим о том, как их выровнять в рамках контейнера или области.

88 Что делает:выравнивает элементы в пределах области по горизонтали.

89 Растягивает элементы на всю ширину грид-ячейки

90 Располагает элементы в левой части грид-ячейки или области

91 Располагает элементы в центре грид-ячейки или области

92 Располагает элементы в правой части грид-ячейки или области

93 Что делает:выравнивает элементы в пределах области по вертикали.

94 Растягивает элементы на всю длину грид-ячейки

95 Располагает элементы в верхней части грид-ячейки

96 Располагает элементы в центре грид-ячейки

97 Располагает элементы в нижней части грид-ячейки

98 Что делает:выравнивает элементы в пределах всего контейнера по горизонтали.

99 Располагает элементы в левой части грид-контейнера

100 Располагает элементы по центру грид-контейнера

101 Располагает все элементы в правой части грид-контейнера

102 justify-content: space-between;Распределяет элементы по левому и правому краю. Первый элемент располагается ближе к началу, а последний - ближе к концу

103 justify-content: space-around;Распределение с равным пространством между элементами и половиной этого пространства от краёв

104 justify-content: space-evenly;Распределение с равным пространством и между элементами, и от краёв

105 Что делает:выравнивает элементы в пределах всего контейнера по вертикали.

106 Для начала увеличим высоту контейнера с помощью параметра height:

107 .container { display: grid; /* code... */ height: 200px; }Изображение: Skillbox MediaПока элементы просто растянулись по длине контейнера, а теперь попробуем применить к нему следующие свойства:

108 Все элементы расположились в верхней части контейнера

109 Все элементы расположились в середине грид-контейнера

110 align-content: space-between;Элементы расположились по верхнему и нижнему краю. Первый элемент ближе к началу, последний - ближе к концу

111 align-content: space-around;Распределение с равным пространством между элементами и половиной этого пространства от краёв

112 Следующие свойства работают с отдельными грид-элементами, поэтому параметры мы будем прописывать не всему контейнеру, а элементу - скажем, с буквой A.

113 Что делает:выравнивает грид-элементы по горизонтали.

114 Элемент A растянулся по всей длине грид-области

115 Элемент A расположился в центре грид-области

116 Элемент A расположился в начале грид-области

117 Элемент A расположился в конце грид-области

118 Что делает:выравнивает грид-элементы по вертикали.

119 Элемент A растянулся по всей ширине грид-области

120 Элемент A расположился в середине грид-области

121 Элемент A расположился в начале грид-области

122 Элемент A расположился в конце грид-области

123 В CSS грид бываетвложенным - это значит, что он содержит в себе другой грид-контейнер. Чтобы понять, как это работает, давайте немного пересоберём наш HTML-каркас, добавив в него ещё один подуровень элементов:

124 <head> <title>CSS Grid Layout</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="A">A</div> <div class="B">B</div> <div class="С">C</div>  <div class="D"> <div class="E">E</div> <div class="F">F</div> <div class="G">G</div> </div> <div class="H">H</div> <div class="J">J</div> </div> </body>Для основного контейнера в CSS-файле создадим сетку 3 на 3:

125 /* Объявляем грид 3 × 3 */ .container { display: grid; grid-template-columns: repeat(3, 3fr); grid-template-rows: repeat(3, 3fr); }И вот какая матрёшка у нас получилась:

126 Изображение: Skillbox MediaА теперь для элемента D определим display: grid - то есть объявим внутри него ещё одну сетку. Для свойств строк и столбцов напишем параметр subgrid, который заимствует параметры родительского грида:

127 .D { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }Изображение: Skillbox MediaГотово! Теперь можно мастерски жонглировать элементами E, F, G, задавая им разное расположение в пределах элемента D (который тоже стал сеткой). Например, сделаем так, чтобы E начинался от второй вертикальной линии грида до третьей:

128 .E { grid-column: 2 / 3; }Внутренние элементы, в свою очередь, расположились уже во вложенном гриде:

129 Изображение: Skillbox MediaСегодня мы узнали, что такоегрид в CSS: как он работает, из чего состоит и как настраивается. Повторим ключевые моменты:

130 <ul><li>Grid Layout в CSS - это гибкая разметка, при которой элементы располагаются в виде таблицы. Таблица состоит из ячеек, которые можно собирать в целые области.</li>

131 <li>Чтобы создать грид, нужно в файле с CSS-разметкой добавить строчку display: grid.</li>

132 <li>Грид состоит из родительского контейнера и вложенных в него элементов. Элементы могут занимать несколько ячеек, которые складываются в столбцы, колонки или области.</li>

133 <li>Фракция - единица измерения в CSS, созданная для удобства - чтобы можно было задавать соотношения между элементами и не подгонять вручную проценты.</li>

134 <li>Грид может содержать в себе другой грид - такая конструкция называетсявложенным subgrid.</li>

135 <li>Основными свойствами грид-контейнера являются:grid-template,grid-template-columns,grid-template-rows,grid-template-areas.Они позволяют задавать размеры колонок, строк или целых областей.</li>

136 <li>За отступы между колонками грида отвечает свойствоcolumn-gap,а между рядами -row-gap.</li>

137 <li>Горизонтально выровнять элементы контейнера можно с помощьюjustify-itemsи justify-content, а вертикально - с align-itemsи align-content.</li>

138 <li>Настроить расположение элементов от определённой линии грид-сетки можно с помощью свойств:</li>

139 </ul><ul><li>по горизонтальной оси:grid-column-start,grid-column-end,grid-column;</li>

140 <li>по вертикальной оси:grid-row-start,grid-row-end,grid-row;</li>

141 <li>или общим свойствомgrid-area.</li>

142 </ul><ul><li>Выровнять конкретный элемент грида можно с помощьюjustify-self(по горизонтали) и align-self(по вертикали).</li>

143 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>