Модуль 1 · урок 5 з 14

CSS Grid

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

Одиниця fr і чому вона краща за відсотки

.grid {
  display: grid;
  grid-template-columns: 260px 1fr;  /* сайдбар фіксований, решта — усе вільне місце */
  gap: 24px;
}

fr — це частка вільного місця, яке лишилось після фіксованих колонок і проміжків. Саме тому 1fr зручніший за 50%: відсотки не знають про gap і при двох колонках по 50% плюс проміжок сітка вилізе за межі.

repeat, minmax, auto-fit

/* три однакові колонки */
grid-template-columns: repeat(3, 1fr);

/* адаптивна сітка карток БЕЗ медіазапитів — головний рецепт Grid */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

auto-fit чи auto-fill? Різниця видно лише тоді, коли карток мало. auto-fill створює порожні колонки-привиди й притискає картки вліво; auto-fit схлопує порожні колонки, і наявні картки розтягуються на всю ширину. У 9 випадках з 10 треба auto-fit.

Іменовані області — коли каркас читається як картинка

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "aside  main"
    "footer footer";
  min-height: 100dvh;
  gap: 16px;
}

.layout__header { grid-area: header; }
.layout__aside  { grid-area: aside; }
.layout__main   { grid-area: main; min-width: 0; }
.layout__footer { grid-area: footer; }

Це і є той самий «каркас дашборду» з практики. Перевага в тому, що макет видно прямо в CSS: щоб перенести сайдбар праворуч, достатньо поміняти два слова в grid-template-areas.

Розміщення й вирівнювання

.wide  { grid-column: span 2; }        /* займи дві колонки */
.first { grid-column: 1 / 3; }        /* від лінії 1 до лінії 3 */
.tall  { grid-row: span 2; }

.grid {
  justify-items: stretch;  /* як елементи стоять у клітинці по горизонталі */
  align-items: start;      /* ...і по вертикалі */
  justify-content: center; /* як уся сітка стоїть у контейнері */
}

Плутанина тут стандартна: *-items — про вміст клітинок, *-content — про саму сітку всередині контейнера. Якщо сітка вужча за контейнер, працює друге; якщо клітинка більша за вміст — перше.