Haladó grid.

A Bootstrap rácsa (row + col) valójában flexbox: egy irányban rendez sorokat. Ha az elrendezés két irányban kötött (sorok és oszlopok egyszerre, egymásba nyúló területek), a CSS Grid tömörebb és pontosabb. A két rendszer jól megfér: a nagy vázat Grid adja, a dobozok belsejét Bootstrap-komponensek és utility osztályok. A Grid alapjait a CSS műhely 9. témája mutatja be, rácsvonalakkal.

• vezérlőpult-elrendezés Griddel
• masonry („téglafal”) elrendezés
• auto-fill és auto-fit
• elnevezett területek, összetett elrendezés

Háromhasábos váz (grid-template-columns: 240px minmax(0, 1fr) 260px): oldalsáv, fő tartalom, jobb sáv. A minmax(0, 1fr) fontos: a sima 1fr sávot a széles tartalom (táblázat) szétfeszítené, és a jobb sáv kilógna – a régi változatban pontosan ez történt. 1200 px alatt a jobb sáv a tartalom alá kerül, 992 px alatt az oldalsáv a tetejére. Nézd meg laptop- és mobilszélességen is!

Különböző magasságú kártyák hézag nélkül egymás alatt, mint egy téglafal (pl. Pinterest). A régi változat egyszerű rácsot használt (grid-template-columns), amelyben minden sor olyan magas, mint a legmagasabb eleme – így nagy üres foltok maradtak, és ez nem masonry. A legegyszerűbb valódi megoldás a többhasábos szöveg technikája: columns: 3 240px, a kártyák pedig break-inside: avoid-ot kapnak, hogy ne törjenek ketté. A kártyák így oszloponként, fentről lefelé követik egymást.

Mindkettő annyi legalább 150 px-es oszlopot hoz létre, amennyi elfér. Ha kevesebb az elem, mint az oszlop, az auto-fill megtartja az üres oszlopokat (az elemek nem szélesednek), az auto-fit összecsukja őket (az elemek kitöltik a sort). Váltogasd a szélességet: mobilon nincs különbség, mert ott minden oszlop megtelik.

A grid-template-areas rajzként írja le a vázat; mobilon egyetlen hasábba rendezzük ugyanazokat a területeket – a HTML változatlan, csak a „rajz” más.

Négyoszlopos rács, amelyben a kiemelt tartalom és a lista a teljes szélességet fogja át (grid-column: 1 / -1 – az első vonaltól az utolsóig). Tableten két, mobilon egy oszlop.

1. Készíts admin-vezérlőpultot: Grid váz (fejléc, oldalsáv, tartalom), a tartalomban Bootstrap-kártyák és táblázat. Ellenőrizd 375 px-en: nincs-e vízszintes görgetés?
2. Készíts Pinterest-szerű masonry galériát 10 különböző magasságú képpel.
3. Készíts terméklistát repeat(auto-fill, minmax(200px, 1fr))-rel, majd cseréld auto-fit-re három termék esetén – mi változik?
4. Írd át a „területek” vázat úgy, hogy tableten a navigáció és az oldalsáv egymás mellett, a tartalom alatt legyen.