Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В уроке, посвящённом терминологии модуляGridуже демонстрировался блогHexletи пример сетки, которую он использует. Вы могли заметить, что помимо непосредственно полос, по которым выстраивается контент, в этой сетке были использованы отступы между полосами. На изображении они были выделены оранжевым цветом.

2 Зачем же они нужны? Зачастую, весь наш контент внутри ячеек располагается по всей ширине. В этом случае отступы между колонками являются заменой свойстваmargin, но с одним существенным условием: модульGridавтоматически проставляет отступы только там, где это необходимо. Это значит, что при разработке нет нужды отменять ненужныеmarginу первых или последних полос сетки.

3 Отдельно стоит упомянуть о том, что данные отступы добавятся к ширине полос, внутри которых расположен элемент. Внутри самого элемента никаких отступов не будет.

4 Перейдём от теории к практике. Возьмём один из примеров, который был в прошлых уроках. В нём представлена типичная схема двухколоночного макета, который часто встречается в разработке. Для удобства работы в данном уроке, помимо определенияGrid-областей, укажем ширину каждой колонки в 100 пикселей:

5 <a>https://codepen.io/hexlet/pen/LYGOPVB</a>

6 Обратите особое внимание на совместную работу свойств grid-template-areas, grid-template-columns/grid-template-rows. Как видно, они не являются заменой друг друга, а прекрасно работают в связке.

7 В этом примере представлен макет, состоящий из 6 колонок. Сейчас отступа между сайдбаром и основным контентом не существует. Обычно это плохо отражается на читаемости информации в макете, так как тексты из двух разных элементов начинают слипаться друг с другом.

8 <a>https://codepen.io/hexlet/pen/jOWaNrM</a>

9 Для решения задачи создания отступов междуGrid-полосамисуществует 2 свойства: grid-column-gap и grid-row-gap. Как можно догадаться из названия, первое свойство отвечает за отступ между колонками, а второе свойство - за отступ между рядами. В качестве значения свойства выступает любая доступная вCSSединица измерения. Будь то пиксели, проценты или любые другие единицы измерения.

10 Создадим в нашем двухколоночном макете отступ между колонками в 30 пикселей. Для этого необходимо уконтейнеравыставить необходимое значение.

11 <a>https://codepen.io/hexlet/pen/mdVBNGz</a>

12 Если взглянуть на получившийся макет с помощьюChrome DevTools, то получим следующее:

13 Обратите внимание на отступы между колонками и на то, что несмотря на них, не появилось никаких отступов внутри элементов. Отступы стали частью наших элементов. А между сайдбаром и основным контентом образовался необходимый отступ в 30 пикселей.

14 На самом деле свойства grid-column-gap и grid-row-gap потихоньку выводятся из стандарта. В спецификацииCSSпоявляется возможность задавать точно такие же отступы в модулеFlex, чтобы уйти от текущих проблем с отрицательными отступами при создании макетов. По этой причине было принято решение сделать одни правила и дляFlex, и дляGrid. Новые версии свойств избавились от приставкиgrid-*и именуются просто column-gap и row-gap.

15 Для удобства, разработчикиCSS Grid Layoutдобавили сокращённое свойство grid-gap (или просто gap) для возможности указать отступы между колонками и рядами в одном единственном свойстве. Свойство grid-gap может принимать 2 значения:

16 <ul><li>Отступ между рядами.</li>

17 <li>Отступ между колонками.</li>

18 </ul>Если указать только одно значение в свойстве, то браузер выставит данный отступ и для колонок, и для рядов.

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

20 <h2>Позиционирование полос</h2>

21 ВCSS Grid Layoutесть два свойства, позволяющие автоматически выровнять полосы внутри контейнера. Это свойства justify-content и align-content. Ничего не напоминает? Те, кто проходил курс поFlexконечно же узнали эти свойства. Теперь вы можете увидеть, как тесно между собой связаны модулиCSS Flexible Box LayoutиCSS Grid Layout. Разрабатывая с использованием этих двух модулей, вы часто будете пользоваться одинаковыми свойствами, которые, как не трудно догадаться, имеют и одинаковые значения. Посмотрим на них. В качестве примера возьмём 3 полосы, каждую из которых покрасим в свой цвет, чтобы более явно видеть разницу. Сам контейнер покрасим в серый цвет, чтобы видеть его ширину.

22 <a>https://codepen.io/hexlet/pen/ExPbPRW</a>

23 <h3>justify-content</h3>

24 Свойство justify-content позволяет выровнятьGrid-полосыпо горизонтали. То есть выравниваются колонки относительно контейнера. Как и в модулеFlex, свойство justify-content может принимать следующие значения:

25 start- это нормальное поведение элементов внутри контейнера. Все наши столбцы стартуют от левого края и идут по горизонтали друг за другом. Примеры в данном случае излишние.

26 end- При данном значении все элементы внутри контейнера сместятся к правой границе.

27 <a>https://codepen.io/hexlet/pen/gOPXPZq</a>

28 center- как видно из названия, все элементы внутри контейнера будут отцентрованы внутри контейнера.

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

30 stretch- Данное значение свойства является значением по умолчанию, когда колонкам не выставлена фиксированная ширина. Чтобы визуализировать это, изменим немного пример. Сделаем колонки с автоматической шириной. Блоки с тёмной границей являются элементами контейнера. Каждый элемент имеет ширину и высоту по 40 пикселей.

31 Обязательно попробуйте изменить значения свойства justify-content в данном примере, чтобы увидеть, как поведут себя элементы при уже известных вам значениях.

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

33 space-around. Здесь всё работает точно так же, как и воFlex. Значениеspace-aroundсделает равные отступы между колонками и половину этого расстояния по краям контейнера.

34 <a>https://codepen.io/hexlet/pen/zYrPqdW</a>

35 space-evenly. Значение работает так же, как иspace-aroundза одним исключением - отступы по краям контейнера выставляются не в половину расстояния между элементами, а в полную ширину.

36 <a>https://codepen.io/hexlet/pen/BajmKmo</a>

37 space-between. При этом значении все элементы получают одинаковое расстояние между собой. При этом нет никаких отступов от краёв. Первый и последний элемент прижимаются к краям контейнера. Если таких элемента всего два, то они расположатся по краям контейнера.

38 <a>https://codepen.io/hexlet/pen/BajmKYj</a>

39 <h3>align-content</h3>

40 Свойство align-content по своему поведению очень похоже на свойство justify-content. Разница заключается только в направлении выравнивания. Если при justify-content выравнивались колонки внутри контейнера, то align-content выровняет ряды внутри контейнера. Для демонстрации воспользуемся одним примеромcodepen, внутри которого будут показаны все значения, которые принимает свойство.

41 <a>https://codepen.io/hexlet/pen/bGEYpxw</a>