При создании сложных макетов веб-страницы с помощью CSS Grid Layout сталкиваемся с потребностью эффективно управлять повторяющимися шаблонами.

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

Управление повторяющимися шаблонами

Представим, у нас есть макет с 6 столбцами, каждый из которых должен иметь одинаковую ширину. С использованием функции repeat(), это можно сделать следующим образом:

.grid-container {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
    }
    .grid-item {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
    }

HTML

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>

В данном примере создается сетка с 6 столбцами, каждый из которых занимает равную долю доступного пространства (1fr). Границы и отступы добавлены для наглядности.

Комбинирование повторений

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

CSS

  .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 100px 1fr);
    }
    .grid-item {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
    }

HTML

<div class="grid-container">
    <div class="grid-item">Fixed</div>
    <div class="grid-item">Flexible</div>
    <div class="grid-item">Fixed</div>
    <div class="grid-item">Flexible</div>
  </div>

Здесь создается сетка из 2 столбцов: первый имеет фиксированную ширину 100 пикселей, второй занимает оставшееся пространство (1fr). Это позволяет создать гибкий макет с фиксированными и гибкими столбцами.

Применение к строкам

Функция repeat также может быть использована для управления повторяющимися строками.

CSS

.grid-container {
      display: grid;
      grid-template-rows: repeat(3, 150px);
      grid-gap: 10px;
    }
    .grid-item {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
    }

HTML

<div class="grid-container">
    <div class="grid-item">Row 1</div>
    <div class="grid-item">Row 2</div>
    <div class="grid-item">Row 3</div>
  </div>

Здесь создается сетка из 3 строк высотой 150 пикселей каждая. Применен grid-gap для создания промежутков между ячейками. Это может использоваться для вертикального выравнивания элементов.

Произвольные комбинации

Возможно также комбинировать различные значения и единицы измерения внутри функции repeat.

CSS

 .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 100px 1fr 2fr);
      grid-gap: 10px;
    }
    .grid-item {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
    }

HTML

<div class="grid-container">
    <div class="grid-item">100px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">2fr</div>
    <div class="grid-item">100px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">2fr</div>
  </div>

Этот пример создает сетку из 3 столбцов, где каждый столбец имеет свою уникальную ширину: 100 пикселей, 1fr и 2fr. Промежутки между ячейками добавлены для улучшенного визуального восприятия.

Заключение

Функция repeat() и свойство grid предоставляют мощные инструменты для управления сеткой в CSS. Эффективное использование повторений с repeat позволяет более гибко настраивать макеты, делая код чище и более читаемым. Используйте эти возможности для оптимизации вашего веб-дизайна!