Грід-елементи можуть самі ставати грідами в CSS Grid. Тобто ви зможете вкладати грід-елемент у інший грід-елемент, тим самим створюючи вкладений грід контейнер.
Щоб створити такий вкладений грід, все, що вам потрібно зробити — це застосувати display: grid (або display: inline-grid) до грід елемента і він сам стане грідом. Ви також можете використовувати display: subgrid для створення підгріду. Подивіться на прикладі, як це відбувається.
Більшість грід властивостей не наслідуються, що означає, що ваш вкладений грід не буде наслідувати значення свого батьківського гріда.
Це дозволяє вам вносити зміни в батьківський грід без ненавмисного впливу на вкладений грід.
Наприклад, ви встановили grid-auto-flow: column на батьківському гріді, але не встановили цю властивість на вкладений грід. У цьому випадку вкладеному гріду буде призначено значення row, тому що це початкове значення для цієї властивості.
Зверніть увагу, що на батьківському гріді числа йдуть вертикально вниз по колонках, замість того, щоб розміщуватись горизонтально по рядку, але вкладений грід все одно йде горизонтально по рядку.
CSS Grid модуль може задавати значення subgrid для властивості display. Проте, не всі браузери його ще підтримують. Хоча, це значення має виявитися досить корисним.
Subgrid — це вкладений грід, але з display: subgrid. Це робить його особливим типом грід-контейнера, який бере участь у визначенні розміру гріда батьківського грід контейнера. Іншими словами, контент підгріда впливає на розмір батьківського гріда, дозволяючи контенту розташовуватись по двох грідах. Нижче приклад того, де це властивість могло б бути корисним.
CSS, де список є грідом, а елементи списку — підгрідами.
Ось ще один приклад, цього разу з ще більшою кількістю елементів:
