Tėkmė, flexbox ir grid

Vieno dalyko vis dar trūksta. Kad ir koks platus ekranas, tavo kortelės sėdi vienu stulpeliu. Ši pamoka — išdėstymas (layout), tas CSS, kuris dėlioja dėžes dviem kryptimis, ir tai paskutinė detalė, paverčianti puslapį galerija.

Normali tėkmė: ką dėžės daro pačios

Prieš ką nors dėliodamas, žinok numatytą elgesį. Kiekvienas elementas yra arba blokinis, arba įterptinis:

• Blokiniai elementai — div, p, h1, section, article — užima visą prieinamą plotį ir rikiuojasi vienas ant kito. Todėl tavo kortelės sudaro stulpelį: kiekvienas <article> yra blokas, tad kiekvienas nukrenta žemiau ankstesnio.
• Įterptiniai elementai — a, span, ir pagal nutylėjimą img bei button — sėdi eilutėje, tekėdami iš kairės į dešinę kaip žodžiai sakinyje, tik tokio pločio, kokio yra jų turinys.

Tas rikiavimasis — normali tėkmė. Išdėstymo griebiesi tada, kai normali tėkmė nėra ta forma, kurios nori.

Flexbox: elementų eilė (arba stulpelis)

Flexbox naudoji nuo tada, kai sudėjai navigaciją — štai ką jis darė. display: flex ant konteinerio išdėsto jo tiesioginius vaikus išilgai vienos ašies:

.navbar { display: flex; align-items: center; gap: 1.5rem; }

Tai navigacijos juosta: prekės ženklas, nuorodos ir visa kita eilėje, vertikaliai centruota, su tarpu tarp jų. Kortelė naudoja tą patį įrankį kita kryptimi:

.picture-card { display: flex; flex-direction: column; }

— antraštė viršuje, kūnas apačioje, stulpeliu. Kelios flex savybės atlieka didžiąją darbo dalį: gap išretina vaikus, align-items pozicionuoja juos skersai ašies, justify-content paskirsto juos išilgai jos, o flex: 1 ant vaiko liepia jam augti ir suvalgyti likusią vietą — todėl .nav-links nustumia viską po savęs į dešinę. Vienas dalykas, kurį verta įsiminti: flexbox yra vienmatis — viena eilė arba vienas stulpelis.

Grid: eilutės ir stulpeliai vienu metu

Galerija — ne eilė, o langelių tinklelis, kuris apsivynioja per tiek stulpelių, kiek ekranas leidžia. Tai dvi kryptys, ir būtent tam skirtas display: grid. Viena taisyklė tai padaro:

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

Skaityk vidurinę eilutę iš vidaus į išorę:

• minmax(280px, 1fr) — kiekvienas stulpelis yra bent 280px ir daugiausiai viena dalis (1fr) likusios vietos. Tad stulpeliai niekada nesusitraukia žemiau 280, o kai lieka vietos, jie dalijasi ja po lygiai.
• repeat(auto-fill, …) — padaryk tiek tokių stulpelių, kiek telpa konteineryje. Plačiame ekrane tai keturi ar penki; ekranui siaurėjant, tinklelis krenta iki trijų, tada dviejų, tada vieno.

Tai ir visas triukas: tinklelis pats suskaičiuoja savo stulpelius iš prieinamo pločio. Jokio media užklausos, jokių lūžio taškų — auto-fill ir fr priverčia jį reaguoti savaime. (gap: 1.5rem nustato tarpą tarp langelių, pakeisdamas seną paraščių įprotį, kai jos susilieja ir tarpusavyje kaunasi.)

Susijęs raktažodis, kurį sutiksi — auto-fit: beveik toks pat, bet jis suglaudžia tuščius stulpelius, kad keli elementai išsitemptų per visą eilę, o auto-fill palieka tuščius stulpelių langelius. Galerijai, kuri turi išlaikyti kortelės dydį, auto-fill yra teisingas pasirinkimas.

Kaip rinktis tarp jų

Jie ne varžovai; jie atsako į skirtingus klausimus.

• Griebkis flexbox, kai turi elementų eilę, kurios dydžiai lemia išdėstymą — navigacijos juosta, įrankių juosta, kortelės vidinė sandara. Viena kryptis.
• Griebkis grid, kai dėlioji elementus į dvimatę sandarą — galerija, puslapio karkasas, iš lygiuotų eilučių ir stulpelių sudaryta forma.

Nykščio taisyklė: turinio eilė → flex; langelių tinklelis → grid. Tavo puslapis jau naudoja flex mažoms sandaroms; toliau pridedi vieną tinklelį, kuris išdėsto galeriją.