První mřížka má nastavenu definici sloupců pomocí auto-fit,
díky němuž vytváří sloupce jen pro existující prvky:
grid-template-columns: repeat(auto-fit, minmax(10rem,1fr));
Druhá mřížka používá auto-fill, proto přidává co nejvíce
sloupců, i když pro ně nemá žádný obsah:
grid-template-columns: repeat(auto-fill, minmax(10rem,1fr));
Zkuste si měnit šířku okna a pozorovat, jak se mřížky mění. Při úzkém okně
budou obě vypadat stejně. Rozdíl se projeví až od šířky mřížky 41.5rem (40rem
je minimální šířka 4 sloupců, plus 0.5rem za každou mezeru mezi nimi).
auto-fit zůstane u 3 sloupců, které bude roztahovat. Naproti tomu
auto-fill začne přidávat prázdné sloupce a šířka jeho sloupců bude
menší.
zpět: Mřížka čili grid