style.css — viena grid taisyklė

Viena taisyklė. To ir tereikia, kad stulpelis virstų galerija.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Konteineris aplink tavo šešias korteles jau turi class="grid" — turi nuo tada, kai jį pirmą kartą sudėjai, sėdėjo be jokios prikabintos taisyklės, laukdamas būtent šito. Pridėk taisyklę, ir šešios article iš vieno stulpelio šokteli į tiek stulpelių, kiek ekranas talpina.

Stebėk, kaip kiekviena tos vidurinės eilutės dalis atidirba:

• Praplėsk langą. Kai jis peržengia kiekvieną 280px-plius-tarpas slenkstį, tinklelis gauna stulpelį — viena šešių eilė virsta trys-ir-trys, tada du-du-du, užpildydama plotį tau nepalietus nė vieno lūžio taško.
• Susiaurink. Stulpeliai po vieną atkrenta, o telefone nusėda ties vienu stulpeliu — tuo pačiu stulpeliu, nuo kurio pradėjai, tik dabar pasirinktinai, o ne pagal nutylėjimą.
• gap išlaiko pastovų 1.5rem tarp kiekvienos kortelės, horizontaliai ir vertikaliai, kad ir kiek būtų stulpelių.

Tai atlygis už tai, kad class="grid" uždėjai anksti ir korteles apiforminai prieš išdėstymą: žymėjimas dėl tinklelio nė nepasikeitė. Pirma turinys, paskui išdėstymas — ir kadangi išdėstymas visas gyvena auto-fill ir fr, jis reaguoja į ekraną savaime, dar neparašius nė vienos media užklausos.