Namų darbas — tėkmė ir įrankio pasirinkimas

Namų darbas — priversk išdėstymą reaguoti ir žinok, kuris įrankis ką daro.

1. Stebėk tėkmę. Nutverk lango kraštą ir tempk jį nuo pilno pločio iki telefono pločio. Skaičiuok stulpelius jiems kintant: penki ar keturi, tada trys, tada du, tada vienas. Niekas, ką parašei, nereaguoja į konkretų plotį — visa tai daro auto-fill ir minmax. Įsitikink pats, kad media užklausos čia dar nėra.
2. Įvardyk įrankį. Pažvelk į tris puslapio dalis ir pasakyk, kurį išdėstymą kiekviena naudoja ir kodėl: navigacijos juosta (elementų eilė), kortelės vidus (antraštė virš kūno) ir galerija (apsivyniojantis langelių laukas). Dvi yra flexbox, viena — grid; mokėk pasakyti, kuri yra kuri ir kas ją daro vienmatę ar dvimatę.

Bandyk pats: naršyklės įrankiuose pakeisk minmax(280px, 1fr) į minmax(200px, 1fr) ir stebėk, kaip atsiranda daugiau siauresnių stulpelių; tada išbandyk minmax(360px, 1fr) platesniems ir retesniems. Tada pakeisk auto-fill į auto-fit ir susiaurink langą, kai rodomos vos kelios kortelės — pamatyk, kaip auto-fit jas ištempia per visą eilę, o auto-fill išlaikytų kortelės dydžio. Baigęs grąžink į auto-fill, minmax(280px, 1fr).

Privalomas rezultatas: galerija, kuri išsilieja nuo kelių stulpelių iki vieno ekranui siaurėjant, be jokios media užklausos, ir gali parodyti į kiekvieną puslapio dalį ir įvardyti flex ar grid.

Atsiskaitymui: dvi to paties puslapio ekrano nuotraukos — viena plati (keli stulpeliai), viena siaura (vienas stulpelis) — ir vienas sakinys, įvardijantis navigacijos juostos naudojamą išdėstymo įrankį ir galerijos naudojamą.

Toliau. Galerija jau prisitaiko, bet likusi puslapio dalis — ne: telefone navigacija vis dar dėvi savo darbalaukio tarpus, o lankytojas neturi kaip nieko atsiųsti atgal. Kita pamoka — formos ir responsyvus dizainas — prideda tikrą, prieinamą formą ir media užklausas, kurios suderina visą puslapį mažiems ekranams, pradedant nuo mobiliojo.