Reszponzív elrendezések médialekérdezések nélkül
Az automatikus kitöltés automatikusan annyi sávot hoz létre, a kívánt szélességtel, amelyet a tárolóba illeszkedőként határozunk meg. Ebben az esetben ez 10 szám, mert 2000 osztva 200-sal 10.
.container {
display: grid;
max-width: 2000px;
grid-template-columns: repeat(auto-fill, 200px);
}
Az auto-fit, ugyanúgy létrehoz 10 oszlopot, de ez már a nem használt oszlopokat nulla szélességűre állítja be.
.container {
display: grid;
max-width: 2000px;
grid-template-columns: repeat(auto-fit, 200px);
}
Ez lehetővé teszi számunkra, hogy használjuk a minmax függvényt. Így oszlopoknak minimum és maximum szélességi értéket is beállíthatunk. A mi esetünkben ez legalább 200 pixel, (minimum), de lehet akár 1 fr rendelkezésre álló hely (maximum).
.container {
display: grid;
max-width: 2000px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Tehát ez a trükk: auto-fit, majd a minmax függvényben egy fix szám és 1fr. Ezzel négy értékkel automatikusan alkalmazkodni fognak az oszlopaink a különböző képernyők méreteihez anélkül, hogy nekünk bármilyen média lekérdezést kellene pluszban hozzáadni.
