Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-03-10

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

2 <li><a>Ключевые термины и определения</a></li>

3 <li><a>Свойства грид-контейнеров</a><ul><li><a>Display</a></li>

4 <li><a>Колонки (grid-template-columns)</a></li>

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

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

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

8 </ul></li>

9 <li><a>Свойства грид-элементов</a><ul><li><a>Отступы</a></li>

10 </ul></li>

11 <li><a>Выравнивание grid</a><ul><li><a>Justify-items</a></li>

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

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

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

15 </ul></li>

16 <li><a>Выравнивание grid компонентов</a></li>

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

18 </ul><p>При Интернет-серфинге иногда можно заметить, что на сайте информация располагается аккуратно и адаптируется под параметры задействованного устройства. Такой результат достигается за счет так называемой верстки. Ее необходимо грамотно реализовывать при помощи CSS и HTML.</p>

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

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

21 <p>Grid (сетка) - это тип разметки, в котором компоненты на веб-сайте или сервисе будут располагаться в виде таблицы. Технология раскладки элементов на странице. Grid способен работать с двумя измерениями одновременно - горизонталью и вертикалью.</p>

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

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

24 <ul><li>картинки;</li>

25 <li>любой текст;</li>

26 <li>кнопки;</li>

27 <li>блоки HTML-кода;</li>

28 <li>иные компоненты.</li>

29 </ul><p>Далее предстоит познакомиться с основными составляющими грида, а также научиться работать с ними.</p>

30 <h2>Ключевые термины и определения</h2>

31 <p>Чтобы лучше понимать, как работать с грид, необходимо сначала запомнить следующие определения:</p>

32 <ol><li>Грид-контейнер. Такое название получил родительский элемент. К нему в процессе верстки будет применяться свойство display: grid. Он является основным элементов всей разметки. Хранит в себе все содержимое имеющейся сетки.</li>

33 <li>Грид-элемент - дочерний элемент. Является прямым потомком грид-контейнера. Подчиняется принципам и правилам раскладки гридов. Это какой-либо элемент на веб-странице.</li>

34 <li>Grid-линия - линия-разделитель. С ее помощью удается сформировать структуру рассматриваемого элемента верстки. Она может быть как вертикальной (линией колонки), так и горизонтальной (линия ряда). Располагается по обе стороны от колонки или ряда соответственно. Применяется для привязки grid-элементов.</li>

35 <li>Grid-ячейка - пространство между соседними грид-линиями. Это простейшая единица сетки. В ней можно разместить один или несколько блоков программного кода.</li>

36 <li>Grid-полоса - пространство между двумя соседними грид-линиями.</li>

37 <li>Grid-область - область, которая ограничена 4 грид-линиями. Может включать в себя любое их количество как по горизонтали, так и по вертикали. Называется пространством ячеек. В CSS допускается объединение нескольких ячеек в одну для дальнейшей работы с ними в качестве единого целого.</li>

38 </ol><p>Grid напоминает Flexbox, но имеет одно существенное отличие. С помощью рассматриваемого "инструмента" верстки допустимо создание двумерных таблиц. Это значит, что в них возможно формирование одновременно и рядов, и колонок. В случае с Flexbox ситуация обстоит иначе. Здесь допустимо встраивать элементы или в столбик, или в единую линию. Сочетание расположения не предусматривается.</p>

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

40 <p>Изучая grid-сетку, необходимо обратить внимание на свойства грид-контейнеров. Эта информация пригодится для большего понимания примеров изучаемого элемента. При помощи свойств grid-контейнера можно задать параметры будущей таблицы:</p>

41 <ul><li>строки;</li>

42 <li>столбцы;</li>

43 <li>размеры строк и столбцов;</li>

44 <li>расположение ячеек;</li>

45 <li>иные характеристики сетки.</li>

46 </ul><p>Ниже приведены основные свойства, с которыми предстоит работать в процессе верстки веб-сайта или онлайн-сервиса. С ними должен быть знаком каждый, кто изучает CSS.</p>

47 <h3>Display</h3>

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

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

50 <h3>Колонки (grid-template-columns)</h3>

51 <p>Grid-template-columns - свойство, с помощью которого можно создать колонки. Достаточно записать их размеры, разделяя информацию пробелами. Размеры допустимо указывать в разнообразных единицах измерения:</p>

52 <ul><li>пикселях;</li>

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

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

55 <li>иных единицах.</li>

56 </ul><p>CSS допускает смешивание нескольких единиц в пределах одного и того же свойства. Для лучшего понимания рассмотренных далее параметров предстоит изучать наглядные примеры формирования CSS grid.</p>

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

58 <p>Если воспользоваться предложенным примером кода, общая ширина всех колонок окажется более 100 %. На экране соответствующие компоненты будут выглядеть как на шаблоне, представленном выше. Третья колонка уедет за пределы имеющегося контейнера.</p>

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

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

61 <p>Теперь ячейки будут располагаться согласно задумке. Ни одна из них не будет "уезжать" за пределы контейнера.</p>

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

63 <p>Grid-template-rows - свойство, с помощью которого удается задать ряды в контейнере. Принцип формирования тут точно такой же, как и в случае с ячейками. Для указания размер строк необходимо также пользоваться фракциями.</p>

64 <p>Вот пример реализации рассматриваемого свойства:</p>

65 <p>Можно заметить, что в предложенном примере размеры двух строк повторяются. Они занимают 2fr. Для экономии пространства в программном коде принято использовать функцию repeat. Она принимает на вход два параметра:</p>

66 <ul><li>размеры строки во фракциях;</li>

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

68 </ul><p>В программном коде это будет выглядеть так:</p>

69 <p>grid-template-rows: 3fr repeat(2, 2fr) 1fr;.</p>

70 <p>Обе формы записи (полная и сокращенная) допускаются для использования. Их можно чередовать в зависимости от имеющегося контекста. В предложенном примере без функции repeat удалось бы обойтись. Если же требуется создать крупную таблицу, лучше пользоваться сокращенной формой записи. Она делает исходный код более читаемым и лаконичным.</p>

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

72 <p>Grid-template-areas - это одна из особенностей грид-разметки. Рассматриваемый компонент верстки допускает создание областей с гибким регулированием их размеров.</p>

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

74 <p>В grid-контейнере предстоит сформировать "матрицу" из соответствующих имен:</p>

75 <p>На экране соответствующий программный код будет выглядеть так:</p>

76 <p>Каждое имя в grid-template-areas будет соответствовать определенному объекту. Одинаковые имена, стоящие рядом друг с другом, формируют несколько ячеек в единое целое. А именно - в грид-область. В приведенном примере ситуация окажется следующей:</p>

77 <ul><li>компонент A с "псевдонимом" f занимает 25 ячеек;</li>

78 <li>B (i) - 9 ячеек;</li>

79 <li>C (b) - 4 ячейки;</li>

80 <li>D (o) - 1 ячейка;</li>

81 - <li>E (n) �� 1 ячейка.</li>

81 + <li>E (n) - 1 ячейка.</li>

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

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

84 <p>Grid-template - это так называемое сокращенное свойство. Оно дает возможность задать в краткой форме столбцы со строками или полноценные области. Вот пример короткой записи для создания грид-строк и грид-колонок:</p>

85 <p>Здесь при помощи всего одной строки удается задать полноценную таблицу - достаточно записать через слеш (/) количество рядов, а также столбцов. Вот пример сетки из трех строк по 1fr и двух столбцов 2fr:</p>

86 <p>Параметр grid-template может принимать функцию repeat. Здесь она используется точно также, как и в ранее рассмотренных примерах.</p>

87 <p>А вот сокращенная запись для грид-областей. Чтобы воспользоваться такой формой реализации необходимо объявить свойство grid-area для каждого имеющегося объекта:</p>

88 <p>Выше - наглядный пример реализации сокращенной формы записи grid-area. Теперь можно изучить свойства грид-элементов.</p>

89 <h2>Свойства грид-элементов</h2>

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

91 <ul><li>с какой линии элемент начинается;</li>

92 <li>на какой линии компонент должен закончиться.</li>

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

94 grid-column-start: 1;Команда, которая задает начальную позицию (линию) столбцов.grid-column-end: 4;Указание на конечную позицию столбцов.grid-column: grid-column-start/grid-column-end;Объединенная форма записи рассматриваемого свойства. Помогает задать начало и конец столбцов одновременно.<p>А вот движение элемента на странице по вертикали:</p>

95 grid-row-start: 1;Начальная позиция строк.grid-row-end: 3;Конечная позиция строк.grid-row: grid-row-start/grid-row-end;Объединенная форма записи. С ее помощью можно одновременно задать начало и конец для строк.<p>У компонентов сайта имеется одно общее свойство. Оно объединяет все 4 основных параметра. Выглядит соответствующее свойство так:</p>

96 <p>grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end;</p>

97 <p>Вот пример создания grid сетки при помощи изучаемых свойств. В предложенном коде параметры присваиваются первым трем элементам:</p>

98 <p>Здесь исходный код указывает буквам на место, которое им необходимо занять в сетке:</p>

99 <ol><li>A занимает пространство от 1 до 4 линии - и по горизонтали, и по вертикали.</li>

100 <li>B располагается от 4 до 6 линии по горизонтали. По вертикали он растянулся от 1 до 3 линии.</li>

101 <li>C - от 4 до 5 линии по горизонтали, а также от 3 до 4 линии по вертикали.</li>

102 </ol><p>Оставшиеся элементы располагаются в grid по дефолту.</p>

103 <p>Выше можно увидеть наглядный пример того, как рассматриваемый пример кода будет выглядеть на экране.</p>

104 <h3>Отступы</h3>

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

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

107 <li>row-gap - используется для формирования расстояния между строчками grid.</li>

108 </ul><p>А вот пример того, как соответствующие параметры будут выглядеть в исходном коде:</p>

109 <p>Grid gap имеет сокращенную форму записи. В ней характеристики column-gap и row-gap записываются через пробел. Выглядит это в программном коде так:</p>

110 <p>gap: 2% 2%;</p>

111 <p>Всего ранее изученного мало для полноценной верстки сетки (таблицы) на веб-странице. Внимания требует также выравнивание grid контейнера.</p>

112 <p>Грид сетка поддерживает множество полезных и простых в плане реализации свойств. Кроме параметров ее элементов каждый верстальщик должен познакомиться с принципами выравнивания компонентов в рамках grid контейнера или области.</p>

113 <h3>Justify-items</h3>

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

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

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

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

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

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

120 <h3>Align-items</h3>

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

122 <ul><li>align-items: stretch; - растягивание элементов на всю длину grid ячейки;</li>

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

124 <li>align-items: center; - выравнивание по центру;</li>

125 <li>align-items: end; - расположение в нижней части ячейки.</li>

126 </ul><p>Это не все команды, которые помогут выполнить выравнивание при верстке таблиц на сайте через CSS. Есть еще два параметра, позволяющих добиться желаемого результата.</p>

127 <h3>Justify-content</h3>

128 <p>Justify-content - параметр, который используется для выравнивания составляющих сайта в пределах одного контейнера по горизонтали. В этом случае предстоит пользоваться следующими записями:</p>

129 <ul><li>justify-content: start; - размещение элементов в левой части контейнера;</li>

130 <li>justify-content: center; - размещение компонентов по центру grid контейнера;</li>

131 <li>justify-content: end; - расположение всех элементов в правой части контейнера;</li>

132 <li>justify-content: space-between - распределение компонентов по правому и левому краям;</li>

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

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

135 </ul><p>Для выравнивания grid контейнеров необходимо запомнить еще одно свойство. Оно позволяет распределить все элементы в пределах грид по вертикали.</p>

136 <h3>Align-content</h3>

137 <p>Align-content - это свойство, с помощью которого можно выравнивать элементы в пределах всего контейнера по вертикали. Здесь помогут следующие программные коды:</p>

138 <ul><li>align-content: start; - размещение всех компонентов в верхней части grid контейнера;</li>

139 <li>align-content: center; - выравнивание по центру;</li>

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

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

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

143 <h2>Выравнивание grid компонентов</h2>

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

145 <p>Первое свойство - это justify-self. Оно используется для выравнивания компонента по горизонтали:</p>

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

147 <li>justify-self: center; - A размещается по центру заданной области;</li>

148 <li>justify-self: start; - A будет расположен в самом начале grid области;</li>

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

150 </ul><p>Также предусматривается выравнивание грид-элементов по вертикали. Для этого используется align-self:</p>

151 <ul><li>stretch - используется для растягивания A по всей ширине grid области;</li>

152 <li>center - размещение A по центру (в середине) grid области;</li>

153 <li>start - параметр, с помощью которого можно разместить A в начале grid пространства;</li>

154 <li>end - размещение в самом конце грид-области.</li>

155 </ul><p>Всей изученной информации будет достаточно для создания полноценной CSS сетки (таблицы). Этот компонент может предусматривать вложенность.</p>

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

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

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

159 <p>А вот получившийся результат:</p>

160 <p>Далее для D-элемента предстоит определить display:grid. Внутри D объявляется еще одна HTML-сетка. Для строк и столбцов необходимо воспользоваться параметром subgrid. Он требуется для заимствования параметров родительского грида:</p>

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

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

163 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>

164