Плитка в CSS Grid

Плитка в CSS Grid

CSS Grid часто використовується для створення плиткових макетів: карток, галерей, каталогів товарів та інших елементів.

За допомогою grid-template-columns можна легко розташувати блоки у потрібну кількість колонок.

Плитка з 9 блоків по 3 в ряд без відступів

Створимо Grid з дев'ятьма елементами та розмістимо їх у три однакові колонки.

<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}

#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Функція repeat(3, 1fr) створює три однакові колонки. Усі блоки займають свої комірки без проміжків між ними.

Плитка з відступами між блоками

Для створення відстані між елементами використовується властивість grid-gap або сучасний запис gap.

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}

Тепер між усіма блоками з'явився однаковий проміжок 10px.

Відступи тільки між блоками

Якщо потрібно прибрати зовнішній відступ навколо плитки, не додаємо padding контейнеру, а залишаємо тільки gap.

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 2px solid #696989;
  width: 600px;
}

Плитка з 8 блоків

Якщо кількість елементів не ділиться на кількість колонок, Grid автоматично створює неповний останній ряд.

<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 2px solid #696989;
  width: 600px;
}

#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

• Grid дозволяє швидко створювати плиткові макети.
• repeat() спрощує створення однакових колонок.
• gap додає відстань між елементами.
• Неповний останній ряд заповнюється автоматично.

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}