Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В прошлом уроке мы создали 12-колоночную сетку. При этом все элементы в ней располагались исключительно друг за другом и имели ширину одной колонки. Конечно же в реальных проектах это редкая ситуация. Зачастую каждый элемент имеет своё уникальное расположение, и редко они стоят просто друг за другом по горизонтали.

2 В одном из первых уроков упоминалось, что всеGrid-линииимеют порядковые номера. КаждаяGrid-линияимеет 2 значения: порядковый номер при подсчёте слева направо и номер при подсчёте справа налево. Причём в последнем случае номера имеют отрицательное значение. Посмотрим, как это выглядит на примере обычной сетки.

3 По вертикали в данной сетке 5Grid-линий. Самая первая имеет 2 порядковых номера:1и-5. По горизонтали 4Grid-линий. Самая нижняя из них имеет порядковые номера4и-1.

4 Данные номера можно использовать для привязки элементов к конкретнымGrid-линиям. Обратите внимание, что при использованииGridмы уже меньше оперируем такими понятиями, как ширина и высота элемента. Теперь эти две характеристики отданы на откуп колонкам и рядам. Именно от них зависит, какого размера будет элемент внутри сетки.

5 Вернёмся к примеру из прошлого урока. В нём мы реализовали 12-колоночную сетку, внутри которой расположены три элемента.

6 <a>https://codepen.io/hexlet/pen/BajRRWm</a>

7 Теперь, зная порядковые номера всехGrid-линийрасположим наши элементы в следующем порядке:

8 <ul><li>Первый элемент будет занимать 12 колонок, начиная сGrid-линииномер 1. По вертикали он займёт 2 ряда.</li>

9 <li>Второй элемент должен быть расположен ниже первого элемента и займёт 4 колонки, начиная с первой.</li>

10 <li>Третий элемент займёт оставшиеся 8 колонок рядом со вторым элементом.</li>

11 </ul>В конечном итоге получится типичная структура 2-колоночного макета. Для расположения элементов поGrid-линиямвCSS Grid Layoutсуществует 4 свойства:

12 <ul><li>grid-column-start - указывает на начальную вертикальнуюGrid-линиюрасположения элемента.</li>

13 <li>grid-column-end - указывает на конечную вертикальнуюGrid-линиюрасположения элемента. Обратите внимание, что значение указываетдокакой колонки располагать элемент. Сама колонка, указанная в этом свойстве не включается. Если вы хотите включить и указанную колонку, то необходимо прибавить единицу. Например для 12-колоночного макета указывается значение 13, если вы хотите включить последнюю колонку.</li>

14 <li>grid-row-start - указывает на начальную горизонтальнуюGrid-линиюрасположения элемента.</li>

15 <li>grid-row-end - указывает на конечную горизонтальнуюGrid-линиюрасположения элемента. Как и в случае с вертикальнойGrid-линиейсвойство указываетдокакого ряда располагать элемент.</li>

16 </ul>Используя данные свойства мы можем не только задать начальные позиции, от которых отрисуется элемент, но и конечные, что даст ширину элементу. Выставим необходимые свойства для всех трёх блоков. Добавим немного семантики.

17 <a>https://codepen.io/hexlet/pen/NWxvqdg</a>

18 Обратите внимание, что для шапки указано значение grid-column-start. Это может показаться излишним, ведь блок и так стартует самым первым от первой колонки. Это справедливо для тех случаев, если не указана конечнаяGrid-линия. Если убрать свойство grid-column-start, то элемент как бы начнёт расширяться не слева направо, а справа налево.

19 <a>https://codepen.io/hexlet/pen/XWXavrd</a>

20 Для удобного использования этих свойств существуют сокращённые версии записи. Они позволяют записать начальные и конечные значения используя всего одно свойство. Для указания начальной и конечной полосы по горизонтали используется свойство grid-column. Для такой же записи, но по вертикали используется свойство grid-row. В качестве значения указывают начальную и конечную полосу, разделённые слэшем/.

21 Используя сокращённые версии записи пример выше можно записать следующим образом:

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

23 В качестве примера растянем шапку макета используя отрицательное конечное значение.

24 <a>https://codepen.io/hexlet/pen/bGEZGmg</a>

25 <h2>Ключевое слово span</h2>

26 При вёрстке макетов зачастую неудобно знать, с какой полосы начинается элемент и на какой заканчивается. Гораздо нагляднее знать начальную полосу, откуда отрисовывается элемент и количество колонок, которые он должен занять. Текущими средствами, которые изучались, сделать это невозможно.

27 Для решения этой задачи разработчики стандарта внесли ключевое словоspan, указывающее количество ячеек, которые необходимо охватить элементу при расположении внутри сетки. Теперь вместо указания конечного индекса полосы, можно использовать синтаксис: span <количество ячеек>.

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

29 <a>https://codepen.io/hexlet/pen/rNxgyMJ</a>

30 Интересной особенностью является использование в качестве значения только ключевого словаspan. В этом случае браузер разместит элемент с тем количеством строк/колонок, которое вы указали. Например, следующая запись создаст элемент шириной в 2 колонки:

31 Это полезно при компоновке элементов внутри сетки. Благодаря такому подходу возможно создать собственный "фреймворк", в котором классы будут отвечать за количество колонок занятых блоком.

32 <a>https://codepen.io/hexlet/pen/ExPzWwd</a>

33 <h2>Именование линий</h2>

34 Для удобства и более удобного прочтенияCSS, помимо использования индексов линий, можно дать им имена. Это могут быть любые названия, которые опишут ту или иную линию. В дальнейшем именно такими именами и можно будет оперировать. Это удобно при создании сложных макетов, так как постоянно держать в голове откуда начинаются различные блоки и на какой линии они заканчиваются - это плохая идея. Количество ошибок будет расти по мере усложнения макета. В случае с именами всё гораздо проще, так как они чётко описываютGrid-линиюпонятным для разработчика именем.

35 Для создания именованныхGrid-линийиспользуется следующий синтаксис свойств grid-template-columns и grid-template-rows:[Название линии] ширина полосы после линии. Вы можете подставлять любое количество различных имён, причём непосредственно в уже свёрстанном макете. Такая запись не повредит текущему шаблону.

36 Добавим в наш двухколоночный макет именованные линии для обозначения начала каждой из областей. Используем их для обозначения стартовых рядов и колонок. Таких именованных линий будет 4:

37 <ol><li>header-top- Самая верхняя линия, от которой отрисовывается шапка сайта.</li>

38 <li>content-begin- Линия, откуда начинается основной контент сайта. В данном случаеasideиmain. Используем её как ограничитель высоты шапки.</li>

39 <li>sidebar-begin- Левая линия, от которой начинается отрисовыватьсяaside.</li>

40 <li>main-begin- Линия, от которой начинаетсяmain. Воспользуемся ею для ограничения шириныaside.</li>

41 </ol>Подставим имена в уже существующийCSSи посмотрим, как они записываются:

42 Разберём следующую строку: grid-template-columns: [sidebar-begin] 1fr repeat(3, 1fr) [main-begin] 1fr repeat(7, 1fr);. Её можно разделить на 4 части:

43 <ul><li>[sidebar-begin] 1fr. Как и было описано, создаём именованную линию с именемsidebar-beginи полосу шириной в 1 фракцию.</li>

44 <li>repeat(3, 1fr). Уже изученная вами запись, которая создаст 3 полосы с шириной 1 фракция каждая.</li>

45 <li>[main-begin] 1fr. Создаётся именованная линияmain-begin. Ширина полосы после линии составит 1 фракцию.</li>

46 <li>repeat(7, 1fr). Создаётся 7 полос с шириной 1 фракция каждая.</li>

47 </ul>Теперь данные имена можно использовать в изученных свойствах grid-column-start, grid-column-end, grid-row-start и grid-row-end.

48 <a>https://codepen.io/hexlet/pen/ZEQJgyp</a>

49 Важно:создание именованных линий не "отнимает" у них индексы. Вы всё ещё можете обращаться к этим линиям как по индексу (положительному или отрицательному), так и по их именам.

50 Помимо именованияGrid-линийразработчики дали возможность именовать целые области. Как вы помните, область - это несколько полос, которые объединены единымиGrid-линиями. Как же именование областей может помочь при создании макета? На самом деле этот инструмент является одним из прорывных в создании дизайна вCSS. Это свойство позволяет не просто задать имена каким-то абстрактным областям, но и визуализировать сетку с помощью этих имён. Одним из недостатков такого способа является его громоздкость. Давайте разберёмся с этим на практике.

51 Для создания именованных областей используется свойство grid-template-areas. В качестве значения оно принимает данные, которые заключаются в двойные кавычки. Внутри этих кавычек описываются области, которые расположатся на сетке. Сколько колонок они занимают, столько раз их и надо повторить внутри значения. Сами по себе значения отделяются пробелом. Создадим сетку из 6 колонок. В ней, как и в прошлых примерах, расположим 2-колоночный макет. Вначале опишем шапку. Она занимает всю ширину экрана, значит ей нужно выделить 6 колонок. Назовём эту областьheader. Имя области вы можете выбирать произвольное. Так же необходимо указать блок, который будет являться областьюheader. Для этого используется свойство grid-area, значением которого является имя области. В данном случаеheader.

52 Обратите внимание, что в контейнере .grid-6 отсутствуют свойства grid-template-columns и grid-template-rows. Сейчас их роль на себя взяло свойство grid-template-areas. Указав в ней определённое количество областей, автоматически создаются колонки с шириной в 1 фракцию. Если вам нужны другие значения, то всегда можно воспользоваться свойствами grid-template-columns и grid-template-rows, установив необходимую ширину полос.

53 Описав верхний ряд, настало время описать следующий, в котором расположимasideиmain. Для этого продолжим в свойстве grid-template-areas указывать значения. Так как нам нужен новый ряд, то писать внутри значения сheaderне имеет смысла. Добавим пробел, и в новых двойных кавычках укажем расположения элементов в следующем ряду.

54 Важно:в каждом ряду количество колонок должно быть одинаковым. Если в любой строке упустить этот момент, то браузер проигнорирует свойство grid-template-areas, так как не сможет корректно обработать и понять, что вы от него хотели.

55 Если нужно больше рядов, то их можно продолжить добавлять. Это важно, если у вас нестандартные размеры ячеек. В других случаях высота блоков будет определяться контентом внутри них. Это стандартное поведение, знакомое вам по вёрстке макетов. В данном случае создалась сетка из 6 колонок и двух строк.

56 <a>https://codepen.io/hexlet/pen/QWyqLaM</a>

57 Для более удобного чтенияCSSпозволяет переносить строки внутри свойства. Таким образом свойство grid-template-areas становится более наглядным. Также внутри самих значений можно проставлять любое количество пробелов. Колонки в каждой строке можно выставить друг под другом:

58 Бывают ситуации, когда вместо одной из колонок нужна не какая-то существующая область, а пустая ячейка. Так как количество колонок в каждой строке должно быть одинаковым, то просто удалить одну из областей нет возможности. Вместо этого grid-template-areas может принимать специальное значение, которое обозначает пустую область. Этим значением является точка .. В текущей сетке сделаем шапку на одну колонку меньше. Шапка должна занимать 5 колонок вместо 6. В таком случае значение свойства будет выглядеть следующим образом:

59 <a>https://codepen.io/hexlet/pen/qBbPBdE</a>

60 <h2>Самостоятельное задание</h2>

61 Создайте трехколоночный макет, состоящий из:

62 <ul><li>Шапка.</li>

63 <li>Левый сайдбар.</li>

64 <li>Основной контент.</li>

65 <li>Правый сайдбар.</li>

66 <li>Футер.</li>

67 </ul>При создании используйте оба способа. Вначале используйтеGrid-линии, потомGrid-области. Количество колонок в сетке выбирайте самостоятельно. В данном случае их не может быть меньше трёх.