Как построить адаптивную пирамидальную сетку в современном CSS

Что такое пирамидальная сетка и зачем она нужна

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

HTML‑разметка: минимум и гибкость

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

<div class="pyramid">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
  </div>
  <div class="row">
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
  </div>
  <div class="row">
    <div class="cell">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
  </div>
  <div class="row">
    <div class="cell">13</div>
    <div class="cell">14</div>
  </div>
  <div class="row">
    <div class="cell">15</div>
  </div>
</div>

Каждая строка (.row) содержит нужное количество ячеек (.cell). Такой подход упрощает добавление и удаление элементов: достаточно изменить количество .cell в нужной строке, а остальная часть макета адаптируется автоматически.

CSS‑решения: Grid против Flexbox

Для реализации пирамидального расположения можно воспользоваться двумя основными механизмами CSS‑layout: Grid и Flexbox. Оба способа поддерживают распределение свободного пространства, но различаются в управлении выравниванием.

Flexbox

Flexbox позволяет легко центрировать ячейки внутри строки и задавать одинаковый промежуток между ними:

.row {
  display: flex;
  justify-content: center;   /* центрируем ячейки */
  gap: 1rem;                 /* отступ между ячейками */
}

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

CSS Grid

Grid предлагает более мощный контроль над колонками. Можно задать фиксированное количество колонок и автоматически распределять ячейки:

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-items: center;     /* центрируем ячейки в колонках */
  gap: 1rem;
}

auto-fit вместе с minmax гарантирует, что ячейки не станут уже 120 px, а при росте контейнера заполнит доступное пространство равномерно.

Оба подхода работают одинаково хорошо, выбор зависит от предпочтений команды и требований к поддержке старых браузеров.

Шестиугольные ячейки без изображений

Для создания шестиугольных ячеек часто используют clip-path. Это позволяет вырезать нужную форму из любого блока, не прибегая к дополнительным SVG‑файлам.

.cell {
  width: 150px;
  aspect-ratio: 1 / 1;               /* квадратный блок */
  background: #4a90e2;
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%, 75% 100%,
    25% 100%, 0% 50%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}

aspect-ratio сохраняет пропорцию, а clip-path формирует шестиугольник. При необходимости можно добавить плавный переход для интерактивных состояний:

.cell:hover {
  background: #357ab8;
  transform: scale(1.05);
  transition: background .3s, transform .3s;
}

Адаптивность: медиазапросы и переменные

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

:root {
  --cell-size: 150px;
  --gap: 1rem;
}

/* Мобильные устройства */
@media (max-width: 480px) {
  :root {
    --cell-size: 100px;
    --gap: 0.5rem;
  }
}

/* Планшеты */
@media (min-width: 481px) and (max-width: 1024px) {
  :root {
    --cell-size: 130px;
    --gap: 0.75rem;
  }
}

/* Десктопы */
@media (min-width: 1025px) {
  :root {
    --cell-size: 150px;
    --gap: 1rem;
  }
}

Эти переменные затем подставляются в стили ячеек и строк:

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
}

.row {
  gap: var(--gap);
}

Таким образом, при смене ширины окна браузера автоматически подбираются оптимальные размеры, а количество ячеек в строке регулируется самим HTML‑разметкой.

Практические рекомендации

1. Минимизировать вложенность – каждый уровень row → cell достаточно для построения пирамиды, лишние контейнеры только усложняют стили.
2. Использовать gap вместо маргинов – gap работает и в Flexbox, и в Grid, упрощая расчёт отступов между ячейками.
3. Проверять кросс‑браузерность clip-path – в старых версиях Safari требуется префикс -webkit-clip-path.
4. Оптимизировать изображения – если шестиугольники содержат фоновые изображения, применяйте object-fit: cover и background-size: cover для корректного отображения.
5. Тестировать на реальных устройствах – адаптивные параметры, задаваемые через медиазапросы, могут вести себя иначе на устройствах с высоким DPI, поэтому проверка на физическом экране обязательна.

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