Генератор CSS Grid

Що тут важливо

repeat(3, 1fr) означає три колонки по одній частці вільного місця кожна. Одиниця fr ділить залишок після проміжків — саме тому колонки лишаються рівними, хоч би який був gap.

Пастка: 1fr не означає «не менше за вміст». Мінімальний розмір доріжки — auto, і довге нерозривне слово чи широке зображення розпирає колонку, ламаючи рівність. Лікується minmax(0, 1fr) — саме цей рядок найчастіше й шукають, коли сітка «поїхала».

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

Для адаптивної сітки беруть repeat(auto-fit, minmax(200px, 1fr)): колонки самі перелічуються під ширину контейнера.