CSS Grid використовує концепцію явного гріда та неявного. Це, власне, ключова концепція, яку вам потрібно розуміти при створенні грідів, інакше ви можете побачити купу колонок і рядків, про існування яких навіть не підозрювали.
Явний грід — це грід, який ви визначаєте в grid-template-rows, grid-template-columns та в grid-template-areas.
Проте, ви все ще можете мати елементи, які не поміщаються у вашу «явно» вказану сітку. Наприклад, ви визначили грід, який може вмістити лише шість елементів, але сам контейнер фактично складається з дев’яти елементів. Лише шість елементів помістяться в явний грід, а три залишаться. І тут починаються неявні гріди.
Неявні гріди автоматично генеруються самим грід-контейнером щоразу, коли грід-елементи розташовуються за межами явного гріда. Контейнер створює неявні грід треки, додаючи неявні рядки в грід. Ці рядки разом з явними грідами утворюють так звані неявні. Ось приклад:
В цьому прикладі ми явно визначаємо два рядки і дві колонки, що вмістить чотири грід елементи. Проте, тут є шість грід елементів, отже створено неявний грід, щоб вмістити два додаткові елементи.
І це дуже добре. Якби не було створено неявний грід, два додаткові елементи створили б повний безлад у сітці.
Це тому, що ми встановили висоту рядка в властивості grid-template-rows, але вона застосовується лише до явних грідів. Висота рядка на неявних грідах має встановлюватися за допомогою властивості grid-auto-rows. Але оскільки ми цього не зробили, виходить, що неявний рядок використовує розмір треку auto, який базується на контенті. Ось так розташовуються властивості встановлення розміру треку:
У grid-auto-flow також є опціональне значення dense, яке може допомогти у створенні компактного гріда та запобігти великим проміжкам між грід-елементами у випадку непослідовних розмірів усіх грід-елементів у контейнері. Наприклад, у вас є такий грід:
Застосування dense перетворить його на такий:
Застосування цього значення призведе до того, що елементи будуть відображатися не за порядком, оскільки наступні елементи можуть повертатися назад у порядок і заповнювати проміжки, які раніше з’являлися, але це не підходить для кожної ситуації.
