Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Определение</a></li>

2 <li><a>Свойства</a><ul><li><a>Display</a></li>

3 <li><a>Columns</a></li>

4 <li><a>Ряды</a></li>

5 <li><a>Области</a></li>

6 <li><a>Сокращенное свойство</a></li>

7 </ul></li>

8 <li><a>Свойства грид-компонентов</a></li>

9 <li><a>Отступы</a></li>

10 <li><a>О выравнивании контейнеров</a><ul><li><a>Justify-items</a></li>

11 <li><a>Align-items</a></li>

12 <li><a>Justify-content</a></li>

13 <li><a>Align-content</a></li>

14 </ul></li>

15 <li><a>Выравнивание элементов</a><ul><li><a>Justify-self</a></li>

16 <li><a>Align-self</a></li>

17 </ul></li>

18 <li><a>Вложенность</a></li>

19 <li><a>Кратко о важном</a></li>

20 </ul><p>Чтобы на экране при просмотре веб-ресурса информация отображалась корректно, необходимо грамотно организовать его верстку. Она распространяется на кнопки, блоки с текстом, навигацию и другие компоненты.</p>

21 <p>Верстка веб-страниц производится через специальный язык - CSS (Cascading Style Sheets). Он имеет множество элементов. Одним из важнейших для верстальщика, самым адаптивным и удобным, стал компонент grid. Далее предстоит познакомиться с соответствующий свойством более детально.</p>

22 <p>Предложенная информация не только объяснит, что такое grid, но и поможет уяснить правила создания этого компонента. Соответствующие сведения ориентированы на широкую публику. Они пригодятся тем, кто планирует заниматься версткой через CSS.</p>

23 <h2>Определение</h2>

24 <p>CSS Grid Layout - технология для размещения (раскладки) элементов на веб-странице. Она представляет собой двумерную сетку. На ней будут размещаться разнообразные компоненты будущего сервиса.</p>

25 <p>Grid - это набор свойств, с помощью которых получится разместить элементы на экране в нужном порядке, в нужном размере ячеек и задать расстояния между ними.</p>

26 <p>Grid хорошо приспосабливается к различным размерах экрана, что наделяет этот инструмент верстки хорошей адаптивностью. Структура грида напоминает обычный файл Excel: имеются как горизонтальные, так и вертикальные линии. Они совместно образуют множество разных ячеек. В них размещаются не какие-либо выгрузки по зарплатам, а составляющие веб-сайта: кнопки, блоки HTML-кода, текст, картинки и так далее.</p>

27 <p>Части CSS-сетки grid называются так:</p>

28 <ol><li>Контейнер - наиболее важный элемент всей разметки. Он хранит в себе содержимое всей сетки.</li>

29 <li>Ячейка - это единица грид-сетки. Она предусматривает возможность размещения внутри одного или нескольких блоков кода.</li>

30 <li>Линия - горизонтальная или вертикальная линия. Этот компонент разделяет столбцы и колонки.</li>

31 <li>Строка - ряд из ячеек.</li>

32 <li>Столбец - колонка ячеек.</li>

33 <li>Элемент - какой-нибудь элемент веб-сервиса или сайта.</li>

34 <li>Область - пространство из ячеек. В CSS можно объединять ячейки в единое целое, а затем работать с ними как с одним компонентом.</li>

35 </ol><p>Grid - это удобное средство для верстки. Оно отличается от Flexbox (другого популярного типа CSS-разметки) возможностью формирования двумерных таблиц. Это значит, что в них одновременно могут содержаться ряды и колонки. У Flexbox элементы выстраиваются или только в столбик, или в линию - сочетание данных приемов не поддерживается.</p>

36 <h2>Свойства</h2>

37 <p>Свойства грид-контейнера используются для того, чтобы задавать параметры таблицы. А именно: количество строк и столбцов, их размеры, расположение и другие особенности. Далее предстоит познакомиться с этими самыми свойствами и их принципами работы.</p>

38 <h3>Display</h3>

39 <p>Если компоненту при верстке задано свойство grid со значением grid, такой элемент станет грид-контейнером. Его дочерние элементы будут подчиняться правилами grid-раскладки. Снаружи контейнер будет вести себя как обычный блок.</p>

40 <h3>Columns</h3>

41 <p>Для того, чтобы создать колонки, требуется записать их размеры через пробел. Габариты ячеек указываются в самых разных единицах измерения:</p>

42 <ul><li>процентах;</li>

43 <li>сантиметрах;</li>

44 <li>пикселях.</li>

45 </ul><p>Отличительной чертой грид-контейнера и его колонок является то, что верстка допускает в пределах одного свойства сочетать сразу несколько единиц изменения.</p>

46 <p>Чтобы лучше понимать принцип работы ячеек, необходимо рассмотреть наглядный пример: создаются три колонки. Первая будет занимать 1/3 экрана, вторая - только 100 px, третья - оставшееся пространство. Наиболее простой вариант - это запись размером через проценты:</p>

47 <p>Общая ширина всех колонок будет больше 100 %. Это приведет к тому, что третья колонка выедет за пределы контейнера:</p>

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

49 <p>В рассматриваемом примере предстоит отдать одну часть свободного пространства одному столбцу (1fr), третьему - две (2fr), а тот, что будет размещаться по центру, получает положенные 100px. Выглядит в коде ситуация так:</p>

50 <p>Ячейки будут отображаться на экране аккуратно, не выезжая за пределы грида.</p>

51 <h3>Ряды</h3>

52 <p>Следующее свойство grid-контейнера - это ряды (grid-template rows). Примером для рассмотрения этого свойства послужит задание размеров строк имеющейся таблице (сетке).</p>

53 <p>Здесь можно заметить, что размеры двух строк повторяются. Они занимают 2fr. Для того, чтобы все время не записывать одни и те же параметры (свойства), рекомендуется воспользоваться функцией repeat. В ней имеются два входных параметра:</p>

54 <ul><li>размер строки (с измерением во фракциях);</li>

55 <li>количество повторений.</li>

56 </ul><p>Выглядеть соответствующее свойство будет так:</p>

57 <p>Это упрощенная, краткая запись. И полная интерпретация кода, и сокращенная могут встречаться в одной верстке. Их допустимо чередовать - в зависимости от контекста. В заданном примере без функции repeat можно было бы обойтись. Но, если требуется создать 15-20 и более колонок, она смогла бы сделать исходный код более читаемым и удобным.</p>

58 <h3>Области</h3>

59 <p>В CSS гриды имеют еще одно свойство - области (areas). Их размеры могут гибко регулироваться для дальнейшей верстки.</p>

60 <p>Для создания области в каждом CSS-файле объявляется свойство grid-area, параметром которого станет любое имя. Допустимо просто добавить соответствующий фрагмент в любое место CSS-документа:</p>

61 <p>Теперь необходимо зайти в grid-контейнер и сформировать там матрицу имен областей:</p>

62 <p>Теперь элементы на дисплее будут выстраиваться по заданному шаблону. Это свойство работает так: каждое имя в grid-template-areas соответствует определенному объекту. Одинаковые имена, которые стоят рядом друг с другом, будут формировать из нескольких ячеек одно целое. Это и есть грид-область:</p>

63 <ol><li>Компонент A с именем f в заданном примере займет 25 ячеек.</li>

64 <li>Элемент B (i) - 9.</li>

65 <li>C (b) отнимает 4 ячейки.</li>

66 <li>D (o) и E (n) - занимают соответственно по одной ячейке.</li>

67 </ol><p>Есть и другие свойства контейнера, о которых необходимо помнить при CSS-верстке.</p>

68 <h3>Сокращенное свойство</h3>

69 <p>Свойство grid-template используется для более быстрого и удобного определения строк со столбцами, а также целых областей. В программном коде данный параметр будет выглядеть так:</p>

70 <p>Соответствующее свойство позволяет всего одной строчкой сформировать полноценную таблицу. Для этого через слеш записывается количество столбцов и рядов. Вот пример создания сетки из трех строк по 1fr и двух столбцов по 2fr:</p>

71 <p>Свойство grid-template может принимать функцию repeat:</p>

72 <p>Сокращенная запись для объявления grid-областей тоже поддерживается. Для использования этого приема требуется объявить свойство grid-area. Сделать это необходимо для каждого отдельно взятого элемента:</p>

73 <p>Все перечисленные ранее свойства относятся только к грид-контейнеру. Но есть параметры, которые присущи только grid-элементам. Они будут рассмотрены далее.</p>

74 <h2>Свойства грид-компонентов</h2>

75 <p>За счет свойств grid-элементов допускается прямое указание браузеру на то, где должны размещаться составляющие веб-страницы. Для этого потребуется воспользоваться двумя точками:</p>

76 <ul><li>с какой линии элемент будет начинаться;</li>

77 <li>на какой линии компонент заканчивается.</li>

78 </ul><p>Соответствующий принцип актуален как по горизонтали, так и по вертикали. Вот движение компонента по горизонтали:</p>

79 <ul><li>grid-column-start: 1; - используется для записи начальной позиции (линии) столбцов;</li>

80 <li>grid-column-end: 4; - задание конечной позиции (линии) столбцов;</li>

81 <li>grid-column: grid-column-start / grid-column end; - объединенное свойство грид-линий столбцов, которое позволяет задать начало и конец.</li>

82 </ul><p>А вот конструкции, которые помогут задать свойство по вертикали:</p>

83 <ul><li>grid-row-start 1; - задание начальной позиции (линии) строк;</li>

84 <li>grid-row-end: 3; - указание конечной позиции (линии) строк;</li>

85 <li>grid-row: grid-row-start / grid-row-end; - объединенное свойство грид-линий строк, с помощью которого задается их начало и конец.</li>

86 </ul><p>Можно также воспользоваться свойством, которое объединит все перечисленные ранее параметры. Выглядеть в программном коде общее свойство будет так:</p>

87 <p>Теперь можно рассмотреть принцип действия соответствующих свойств на практике. Для этого параметры задаются буквами первым трем элементам:</p>

88 <p>Предложенный фрагмент кода указывает буквам позиции, которые они должны занять в сетке:</p>

89 <ol><li>Элемент A занимает пространство от первой до четвертой линии - как по горизонтали, так и по вертикали.</li>

90 <li>B простирается на четвертой-шестой линиях по горизонтали и от первой до третьей - по вертикали.</li>

91 <li>C - элемент, который занимает область от четвертой до пятой линии по горизонтали. По вертикали он простирается на третьей и четвертой линии.</li>

92 </ol><p>Остальные элементы располагаются в сетке по остаточному принципу. Можно запустить данный фрагмент кода и посмотреть, что получится.</p>

93 <h2>Отступы</h2>

94 <p>При помощи свойства grid-gap происходит регулирование интервалов между элементами в контейнере (отступы). Для этого необходимо воспользоваться двумя входными параметрами:</p>

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

96 <li>row-gap - используется для задания расстояния между имеющимися строчками.</li>

97 </ul><p>В программном коде реализация свойства "отступы" будет иметь примерно такой вид:</p>

98 <p>Gap имеет сокращенную запись, как и свойство grid-template. В ней параметры column-gap и row-gap записываются непосредственно через пробел:</p>

99 <p>Основные свойства грид-контейнера и его компонентов изучены. Теперь предстоит разобраться с принципами выравнивания элементов в рамках того или иного контейнера/области.</p>

100 <h2>О выравнивании контейнеров</h2>

101 <p>Изучая display grid, необходимо знать о том, как выравнивать контейнеры. Для этого используются разнообразные параметры и команды. Далее будут представлены конструкции, которые помогают выравнивать grid-контейнер.</p>

102 <h3>Justify-items</h3>

103 <p>Соответствующая команда используется для того, чтобы выравнивать элементы в пределах области по горизонтали. Здесь необходимо пользоваться следующими записями и конструкциями:</p>

104 <ul><li>justify-items: stretch; - используется для растягивания компонента по всей ширине grid ячейки;</li>

105 <li>justify-items: start; - позволяет расположить компоненты в левой части области или ячейки;</li>

106 <li>justify-items: center; - используется для расположения grid ячеек или областей в центре сетки;</li>

107 <li>justify-items: end; - конструкция, позволяющая располагать компоненты и области в правой части.</li>

108 </ul><p>Это не единственная команда grid, позволяющая располагать элементы на веб-странице в пределах сетки в желаемой позиции. Существуют другие полезные конструкции.</p>

109 <h3>Align-items</h3>

110 <p>Команда, которая позволяет выравнивать grid-элементы в пределах заданной области по вертикали. Здесь используются следующие команды:</p>

111 <ul><li>align-items: stretch; - используется для того, чтобы растянуть составляющие страницы на всю длину grid-ячейки;</li>

112 <li>align-items: start; - располагает компоненты в верхней части ячейки;</li>

113 <li>align-items: center; - расположение по центру "сетки";</li>

114 <li>align-items: end; - конструкция, позволяющая располагать элементы в нижней части grid-ячейки.</li>

115 </ul><p>Рассмотренные команды позволяют выравнивать элементы в grid относительно определенной области. Но есть конструкции, поддерживающее расположение составляющих веб-страницы относительно всего контейнера.</p>

116 <h3>Justify-content</h3>

117 <p>Команда, которая поможет выровнять составляющие веб-сайта или сервиса относительно всего grid-контейнера по горизонтали. Здесь можно пользоваться следующими операциями:</p>

118 <ul><li>justify-content: start; - расположение составляющих в левой части контейнера;</li>

119 <li>justify-content: center; - расположение по центру grid-контейнера;</li>

120 <li>justify-content: end; - конструкция, помогающая разместить составляющие веб-страницы в правой части grid-контейнера;</li>

121 <li>justify-content: space-between; - распределение по левому и правому краю так, чтобы первая составляющая находилась ближе к началу, а последняя - к концу;</li>

122 <li>justify-content: space-around; - распределение с равным пространством между составляющими сайта и половиной этого пространства от краев;</li>

123 <li>justify-content: space-evenly; - используется для распределения положения с равным пространством от краев и непосредственно между имеющимися элементами.</li>

124 </ul><p>Изучая display grid, необходимо помнить - выравнивание производится не только по горизонтали, но и по вертикали. Для этого CSS предусматривает отдельные конструкции.</p>

125 <h3>Align-content</h3>

126 <p>Align-content - команда, позволяющая выравнивать составляющие веб-портала на дисплее в пределах имеющегося контейнера. Выравнивание осуществляется по вертикали. Для него необходимо задействовать следующие конструкции:</p>

127 <ul><li>align-content: start; - расположение в верхней части grid-контейнера;</li>

128 <li>align-content: center; - выравнивание по центру (по середине);</li>

129 <li>align-content: space-between; - расположение по верхнему и нижнему краю так, чтобы первый компонент оказался ближе к началу, а последний - к концу;</li>

130 <li>align-content: space-around; - распределение с равным пространством между компонентами и половиной имеющегося свободного места.</li>

131 </ul><p>Все эти команды использовались для выравнивания сразу всех компонентов в grid тем или иным образом. При верстке иногда возникает необходимость выравнивания отдельных составляющих на странице.</p>

132 <h2>Выравнивание элементов</h2>

133 <p>Это параметры, которые используются для работы с отдельными grid-компонентами. Свойства будут приписываться не всему контейнеру, а только одной его составляющей. Примером станет блок А.</p>

134 <h3>Justify-self</h3>

135 <p>Параметр, который используется для выравнивания составляющей А по горизонтали. Здесь на помощь приходят следующие команды:</p>

136 <ul><li>justify-self: stretch; - растягивание блока А по всей длине grid-области;</li>

137 <li>justify-self: center; - расположение А по центру области;</li>

138 <li>justify-self: start; - размещение блока А в самом начале grid;</li>

139 <li>justify-self: end; - размещение в самом конце области.</li>

140 </ul><p>Выравнивание по вертикали здесь тоже имеет место. Для этого используются иные параметры.</p>

141 <h3>Align-self</h3>

142 <p>С помощью этой конструкции можно выравнивать grid-элементы по вертикали. Рекомендуется пользоваться следующими командами:</p>

143 <ul><li>align-self: end; - расположение в конце grid-области;</li>

144 <li>align-self: center; - выравнивание по середине области;</li>

145 <li>align-self: start; - расположение блока А в самом начале grid области;</li>

146 <li>align-self: stretch; - растяжение компонента А по всей ширине имеющейся области.</li>

147 </ul><p>Теперь понятно, какие параметры можно использовать в процессе верстки. Существуют еще несколько приемов, о которых необходимо знать при работе с CSS.</p>

148 <h2>Вложенность</h2>

149 <p>Гриды в верстке сайтов бывают вложенными. Это ситуация, когда в одном гриде имеется другой грид-контейнер. Для того, чтобы лучше понимать вложенность, рекомендуется рассмотреть наглядный пример. Вот HTML-каркас, который имеет еще один подуровень компонентов:</p>

150 <p>Для основного контейнера в CSS-файле необходимо создать сетку размером 3 x 3:</p>

151 <p>Для компонента D необходимо определить display: grid. Эта команда помогает объявить в нем еще одну сетку. Для свойств строк и столбцов предстоит воспользоваться параметром subgrid. Он будет заимствовать параметры "родительского" грида.</p>

152 <p>В программном коде ситуация будет выглядеть следующим образом:</p>

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

154 <p>Каждый предложенный фрагмент кода можно запустить и посмотреть, что получится на экране.</p>

155 <h2>Кратко о важном</h2>

156 <p>Теперь понятно, что собой представляет CSS-верстка при помощи сетки. Рекомендуется запомнить следующие главные моменты рассмотренной темы:</p>

157 <ol><li>Грид - это гибкая разметка, в которой компоненты размещаются в качестве таблицы, состоящей из ячеек. Их можно собрать в полноценные области.</li>

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

159 <li>Для создания грида в разметке требуется добавить строку display:grid.</li>

160 <li>Для измерений у рассматриваемой сетки используется специальная единица измерения - фракция.</li>

161 <li>Допускается настройка расположения компонентов грида несколькими способами: по горизонтальной или вертикальной осям, а также относительно всей области.</li>

162 </ol><p>Научиться верстать сайты через CSS, а также грамотно использовать grid помогут<a>компьютерные курсы</a>. На них в срок до 12 месяцев пользователей научат создавать собственные страницы в Интернете и оформлять их.</p>

163