CSS Grid: побудова макетів із рядків і стовпців

Коротко: CSS Grid розміщує елементи в двовимірній сітці рядків і стовпців; він ідеальний для макетів цілих сторінок, тоді як Flexbox підходить для рядків або стовпців усередині окремих областей.

Докладніше: З display: grid контейнер стає сіткою. Ви задаєте стовпці та рядки; дочірні елементи заповнюють клітинки автоматично або розміщуються навмисно.

Подробиці

Основи

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr — частка вільного простору. gap задає проміжки між клітинками. З grid-column: 1 / 3 елемент займає два стовпці; grid-template-areas дає змогу задавати іменовані області («head head», «side content»).

Адаптивність без медіазапиту

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); створює стільки стовпців, скільки вміщується, завширшки щонайменше 220 px. Один стовпець на телефоні, чотири на десктопі, без жодної точки зламу. minmax(), auto-fill/auto-fit і aspect-ratio — ключові інструменти.

Grid чи Flexbox?

• Grid: двовимірний, макет ззовні (спершу сітка, вміст заповнює).
• Flexbox: одновимірний, макет зсередини (розмір визначає вміст), наприклад панелі навігації.
• Їх можна поєднувати: Grid для каркаса сторінки, Flexbox для рядків усередині клітинок.
• Subgrid (grid-template-columns: subgrid) дає змогу дочірнім елементам використовувати доріжки батьківської сітки; доступний у сучасних браузерах.

Як уникнути помилок

• Забагато фіксованих значень у пікселях; віддавайте перевагу fr, minmax, %.
• Не змінюйте порядок лише візуально: порядок Tab і програм читання з екрана слідує вихідному коду.
• Використовуйте інструменти сітки в інструментах розробника браузерів, щоб зробити доріжки видимими.

Див. також: Flexbox, Медіазапити та точки зламу, Tailwind CSS