18.10.2021

Понимание gap в CSS

Осознание gap в CSS

От создателя: возможно, вы уже знаете о свойстве CSS gap. Оно не совершенно ново, но в прошлом году это свойство получило новейшую важную возможность: теперь оно работает во Flexbox в дополнение к CSS Grid. Это, а также тот факт, что я считаю свойство более сложным, чем кажется, принудили меня объяснить, как именно оно работает.

Давайте пристально рассмотрим gap и связанные с ним характеристики и поймем, как и где они используются.

Все свойства gap

Для начала давайте разглядим все свойства CSS, связанные с gap. Их всего 6:

grid-row-gap

grid-column-gap

grid-gap

row-gap

column-gap

gap

Из этого перечня мы можем игнорировать первые три характеристики. Свойства grid-* были добавлены в самом начале, когда составлялась спецификация CSS Grid, но позже они были отключены, когда свойство gap стало более обобщенным. Браузеры как и раньше поддерживают эти устаревшие свойства (на момент написания этой статьи) и просто обрабатывают их так, как как будто у них нету префикса grid-. Как следует, grid-gap то же самое, что gap, grid-column-gap то же самое, что column-gap а grid-row-gap то же самое, что и row-gap.

Что касается 3-х других свойств, зная, что gap это падение, которое позволяет вам указать два других характеристики, нам достаточно только знать, что делают row-gap и column-gap.

Наше осознание этих свойств зависит от типа применяемого макета CSS. Давайте сначала рассмотрим эти варианты.

Где можно использовать gap?

Ранее я использовал gap в макетах сетки, но сейчас их можно использовать во Flexbox, а также в макетах с несколькими столбцами. Давайте разглядим каждый случай.

Использование gap в сетке

Все браузеры поддерживают gap в макетах сетки, и в этом контексте их достаточно просто понять.

row-gap показывает промежуток между рядами

column-gap показывает промежуток между столбцами

Осознание gap в CSS

Сделаем сетку из трех столбцов и 2-ух строк:

CSS

Это даст нам последующую сетку:

Осознание gap в CSS

Полосы на картинке выше называются линиями сетки, и они делят дорожки (строки и столбцы) сетки. Этих линий на самом деле нет в сетке — они невидимы, не имеют толщины и обычно показываются в DevTools, когда мы включаем инспектор сетки.

Осознание gap в CSS

Но если мы добавим в нашу сетку gap, это будет работать так, как если бы эти полосы приобрели толщину. Добавим gap равно 20px:

CSS

Полосы между нашими дорожками стали толщиной 20px и потому раздвигают элементы сетки дальше друг от друга.

Осознание gap в CSS

Стоит отметить, что дорожки как и раньше имеют одинаковый размер (он определяется качествами grid-template-*); поэтому сетка шире и выше, чем была без промежутков.

В сетке свойство row-gap всегда применяется меж строками. Итак, если мы заменим gap на row-gap в приведенном выше примере, мы получим последующее:

Осознание gap в CSS

А column-gap всегда применяется меж столбцами, поэтому замена gap на column-gap дает последующий результат:

Осознание gap в CSS

Сетка ординарна, потому что по умолчанию столбцы вертикальные, а строчки горизонтальные, как в таблице. Так что просто запомнить где column-gap а где row-gap.

Когда употребляется writing-mode, все становится немного сложнее . Режим письма по умолчанию в Вебе — горизонтальный, слева направо, но есть и режимы вертикального письма, и когда это происходит, столбцы становятся горизонтальными, а строчки — вертикальными. Всегда обращайте внимание на то, что writing-mode может сделать код наименее интуитивно понятным, чем обычно.

Это неплохой переход к следующему разделу, поскольку столбцы и строчки во Flexbox приобретают новое значение.

Gap в Flexbox

Давайте побеседуем о gap в макетах Flexbox, где все становится малость сложнее. Мы будем использовать следующий пример:

CSS

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

Осознание gap в CSS

В этом случае column-gap применяется меж элементами а row-gap ничего не делает. Это поэтому, что есть только одна строка. Но сейчас давайте добавим промежуток между элементами:

CSS

Осознание gap в CSS

Сейчас давайте переключим flex-direction нашего контейнера на column, который складывает элементы вертикально, сверху вниз, с помощью последующего кода:

CSS

Вот что произойдет:

Осознание gap в CSS

Разрыв пропал. Даже если column-gap добавляет пространство меж элементами, когда контейнер был в направлении row, он больше не работает в направлении column.

Нам необходимо использовать, row-gap чтобы вернуть пространство меж элементами. В качестве альтернативы мы могли бы использовать gap с одним значением, которое применило бы один и тот же отступ в обоих направлениях и, как следует, работало бы в обоих случаях.

CSS

Осознание gap в CSS

Итак, резюмируя, colum-gap всегда работает вертикально (при условии, что употребляется значение по умолчанию для writing-mode) а row-gap всегда работает горизонтально. Это не зависит от направления гибкого контейнера. Но сейчас посмотрим на пример, в котором задействован перенос строк:

CSS

Тут мы позволяем элементам переноситься на несколько строк flex-wrap: wrap, если не хватает места для размещения всего в одной строке.

Осознание gap в CSS

В этом случае column-gap как и раньше применяется вертикально между элементами а row-gap применяется горизонтально меж двумя строками.

Между этим и сетью есть одно интересное отличие. Промежутки столбцов не непременно совпадают по линиям гибкости. Это из-за значения justify-content:center, что центрирует элементы в границах их линий гибкости. Таким образом, мы лицезреем, что каждая линия гибкости представляет собой отдельный макет, в котором промежутки используются независимо от других линий.

Многоколоночные gap

Многоколоночный — это тип макета, который позволяет очень просто автоматически перемещать контент между несколькими столбцами, как вы могли бы созидать в традиционной газетной статье. Мы устанавливаем количество столбцов и размер для каждого столбца.

Осознание gap в CSS

Gap в многоколоночных макетах работают не так, как сетка либо Flexbox. Есть три заметных отличия:

row-gap не имеет никакого эффекта,

column-gap имеет значение по умолчанию, хорошее от 0,

gap имеют возможность быть стилизованы.

Давайте разберем их. Во-1-х, row-gap не действует. В макете с несколькими столбцами нет строк, которые необходимо разделить. Это означает, что актуально только column-gap (как и gap).

Во-2-х, в отличие от сетки и Flexbox, в многоколоночных макетах column-gap имеет значение по умолчанию 1em (в отличие от 0). Таким образом, даже если просвет не указан вообще, столбцы содержимого как и раньше визуально разделены. Разрыв по умолчанию, естественно, может быть отменен, но 1em — не плохое значение по умолчанию. Вот код, на котором основан пример:

CSS

В конце концов, мы можем стилизовать пустой промежуток меж столбцами в многоколоночном макете. Мы используем свойство column-rule, которое работает как border:

CSS

Осознание gap в CSS

Cвойство column-rule дает нам возможность стилизовать многоколоночный макет.

Помощь браузера

Gap действительно отлично поддерживается браузерами. На сайте сaniuse есть дополнительная информация, но кратко:

Flexbox: gap поддерживается всюду, за исключением Internet Explorer (который уже фактически не используется ), Opera Mini и UC Browser для Android. caniuse показывает на глобальную поддержку на уровне 87,31%.

Grid: То же самое, но мы лицезреем глобальную поддержку 93,79%.

Многоколоночный: тоже самое, но он не поддерживается в Safari и имеет 75,59% глобальной поддержки.

Итак, в целом свойство gap отлично поддерживается, и в большинстве случаев обходные пути не необходимы.

Стилизация gap в flex и grid

Стилизация gap в Flexbox и CSS Grid могла бы быть вправду полезной. Печально то, что сегодня она нигде не поддерживается. Но отменная новость в том, что это может поменяется в ближайшем будущем. Это обсуждалось в рабочих группах CSS и Firefox. Как только у нас будет рабочая реализация в Firefox вкупе с предложением спецификации, возможно, это поспособствовует реализации в других браузерах.

А пока есть методы обойти это. Один из них — присвоить контейнеру сетки цвет фона, потом другой цвет для элементов и, в конце концов, для gap присвоить цвет контейнера.

Несмотря на то что это работает, но означает, что мы не можем использовать gap для сотворения пространства между элементами. Здесь gap выступает в качестве ширины границы. Итак, чтоб визуально разделить элементы немного больше, нам необходимо использовать padding или margin для частей, что не так хорошо… как мы увидим в последующем разделе.

Почему я не могу просто использовать margin либо padding?

Да, в большинстве случаев мы также можем использовать margin (и / либо padding), чтобы добавить визуальное пространство меж элементами макета. Но gap имеет огромное количество преимуществ.

Во-первых, gap определяются на уровне контейнера. Это значит, что мы определяем их один раз для всего макета, и они поочередно применяются в нем. Использование margin востребует объявления для каждого элемента. Это может усложняться, если элементы различаются по собственной природе или происходят из разных еще раз используемых компонентов.

Вдобавок к этому gap по умолчанию работают верно с помощью всего одной строчки кода. К примеру, если мы пытаемся ввести некоторое место между flex элементами, а не вокруг их, с margin потребуются особые указания для удаления дополнительных полей перед первым элементом и после последнего. С gap этого делать не необходимо.

Имея margin: 0 20px на каждом flex элементе, мы получим:

Осознание gap в CSS

Но с помощью gap: 40px на контейнере мы получим последующее:

Осознание gap в CSS

Точно так же в макете сетки определение gap на уровне контейнера намного проще и дает наилучшие результаты, чем необходимость определения margin для каждого элемента и учета margin, которое применяется на краю сетки. С margin: 20px для каждого элемента сетки:

Осознание gap в CSS

И заместо этого в контейнере сетки gap: 40px:

Осознание gap в CSS

Пустое место сумируется

Margin и gap не непременно должны быть указаны отдельно. Фактически, есть много методов отодвинуть элементы макета дальше друг от друга, и все они имеют возможность очень хорошо работать вместе.

Свойство gap только одна часть пустого места, созданного между элементами в контейнере макета. Margin и padding имеют возможность увеличить свободное место, которое уже определено с gap.

Давайте разглядим пример, в котором мы создаем обычный flex макет с заданной шириной, неким значением gap, некоторым распределением контента (с внедрением justify-content) и некоторыми значениями margin и padding:

CSS

Представим, этот код дает следующий результат:

Осознание gap в CSS

Сейчас посмотрим, как именно образовалось пустое место между элементами:

Осознание gap в CSS

Как мы лицезреем, существует четыре разных типа пустого места между двумя последовательными flex элементами:

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

Margin отодвигает элементы еще далее друг от друга, но, в отличие от gap, добавляет место с обеих сторон всех элементов.

Padding обеспечивает некое пространство внутри каждого элемента.

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

Отладка

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

Для gap, есть две специальные особенности, которые могли бы стать полезными.

Активен ли gap?

Если мы не написали gap с ошибками либо указали недопустимое значение, то такое свойство не всегда будет применяться к страничке. Например:

CSS

Код ничего не делает, но это валидный CSS, и браузер не возражает, что gap не относится к макетам блоков. Но в Firefox есть функция Inactive CSS, которая хлопочет о правильном CSS. В этом случае Firefox DevTools показывает предупреждение в инспекторе.

Осознание gap в CSS

Где мой gap?

В Chrome и Microsoft Edge также есть очень нужная функция для отладки gap. Она была добавлена в итоге сотрудничества между Microsoft и Google, цель которого заключалась в разработке инструментов отладки макета в Chromium (проект с открытым начальным кодом, который поддерживает оба браузера, а также и другие). В этих браузерах вы сможете навести указатель мыши на отдельные характеристики на панели «Стили» и увидеть их эффект на страничке.

Осознание gap в CSS

Наведите курсор над gap и свойством justify-content в панели Стили и надлежащие области страницы подсветятся, чтобы указать, где эти характеристики имеют эффект.

Осознание gap в CSS

Наведите курсор над качествами margin и padding, и подсветятся надлежащие элементы модели. Вот и все. Я надеюсь, что эта статья была полезна для осознания того, как работает gap в CSS.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *