Упрощение верстки с помощью Gap

До CSS grid единственным жизнеспособным вариантом для создания динамических макетов был flexbox. Но у него было одно серьезное ограничение: отсутствие поддержки gap.

В то время как инструменты проектирования дизайна поддерживают понятие пробелов, CSS этого не делает, и большинство таблиц стилей полагаются на margin и padding для разделения дочерних элементов flex. Обычно это включало неудобные хаки для исключения последнего элемента flex из списка селекторов:

.flex-item:not(:last-of-type) {
  margin-right: 8px;
  margin-bottom: 8px;
}

Но не было никакого способа исключить последнюю строку flex контейнера из получения margin-bottom, что означало, что ваш flex макет имел ненужный интервал под ним.

Конечно, вы могли бы компенсировать это отрицательными полями на уровне верстки. Но в этот момент вам в конечном итоге приходится писать слишком много CSS для выполнения такой, казалось бы, простой задачи.

Вообще говоря, мне также нравится избегать использования margins на дочернем уровне. Причина этого в том, что дети не должны диктовать, как их братья и сестры расположены — это работа лейаута! Вы можете узнать больше об этом в статье Макса Штайнера о том, почему margin считается вредной практикой. Однако стоит отметить, что из этого правила есть хорошие исключения, например, для размещения элементов в макете статьи. gaps обеспечивают равномерное расстояние, что не всегда является тем, что вы хотите.

В настоящее время это больше не проблема, потому что пробелы flexbox поддерживаются во всех основных браузерах. Safari раньше был странным и некоторое время сдерживал веб, но он поддерживает flexbox gaps начиная с версии 14.1. Это означает, что, если вам не нужно поддерживать старые браузеры, вы можете легко обойтись написанием простого и декларативного CSS, подобного этому:

.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

В качестве альтернативы вы можете использовать grid, который также поддерживает пробелы и автоматическое перенос столбцов:

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(some-min, 1fr));
  gap: 8px;
}

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

Более того, поскольку макеты flex и grid автоматически переворачиваются для RTL, это делает их идеальными для создания макетов, безопасных для RTL, поскольку вам не нужно беспокоиться о направленности текста.