CSS Grid містить функції, що дозволяють точно, легко та інтуїтивно зрозуміло контролювати, як саме елементи вирівнюються після розміщення в області сітки, і як вирівнюється весь Grid Layout.
У шаблоні, створеному на грідах, є такі значення, як auto-fill і auto-fit, які дозволяють створювати грід з багатьма треками певного розміру, які поміщаються в заданому контейнері.
Змініть розмір браузера, щоб побачити, що відбувається. Якщо дивитесь з мобільного пристрою, спробуйте з десктопа. Порівняйте різницю.
Код, що відповідає саме за це:
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
Тут колонкам задається мінімальний розмір 150px і максимум — по залишковому простору. Такі треки будуть повторюватися стільки разів, скільки потрібно, щоб вміститися у заданий контейнер.
Функція repeat() повторює визначення трека стільки разів, скільки вказано в першому параметрі. Використання auto-fill змушує треки повторюватися доти, доки вони не заповнять контейнер.
Розмір цих треків вказано у другому параметрі. У нашому випадку ми використовуємо minmax(150px, 1fr), щоб вказати, що мінімальний розмір стовпця — 150px, а максимальний — 1fr.
auto-fit працює практично так само, як і auto-fill. Різниця лише в тому, що auto-fit стискає всі порожні треки в кінці розміщення, тоді як auto-fill — ні. Найкращий спосіб показати — це демонстрація з порівнянням.
Використання двох маленьких грід-елементів тут допоможе показати всю концепцію роботи. Auto-fill залишає порожні треки в кінці з заданими розмірами, а auto-fit розтягує порожній трек, що веде до заповнення треків розтягнутими елементами для заповнення простору.
Однією з сильних сторін грідів є те, що ви можете створити вже зовсім інший шаблон за секунди.
Це робить CSS Grid ідеальним для медіа-запитів. Ми можемо просто переназначити значення в ASCII-графіці і обгорнути результат у кінцевий медіа-запит.
Це трьохколонковий шаблон на великому viewport, і він стискається в одноколонковий на маленьких пристроях. Таким чином, цей приклад виглядатиме по-різному в залежності від розміру екрану. У будь-якому разі, ось релевантний код для трьохколонкового шаблону для широких в’юпортів.
Зверніть увагу, що ми також підкоригували значення в grid-template-rows і grid-template-columns, щоб вони відповідали новому шаблону. Зокрема, тут має бути лише одна колонка, яка займає весь вільний простір. Оскільки всі грід-елементи будуть у один стовпець, ми призначимо 5 рядків і визначимо їх висоти.
