CSS Grid Layout Part2 - Alapok

A bevezető törióra után gyerünk a gridbe! 😎 Ebben a postban megmutatom az alapokat egy példán át és még egy layout challenge is becsúszik.

CSS Grid Layout nem más, mint egy technológia, ami segít, hogy a weboldalunk vagy appunk elemeit egyszerűen el tudjunk helyezni 2 dimenzióban a rendelkezésünkre álló területen.

Akárcsak a táblázatoknál a grid (vagy rácsos) elrendezés is lehetővé teszi, hogy az elemeket oszlopokba és sorokba rendezzük. Azonban ennél sokkal többről van szó.

Mivel ad többet nekünk?

1. Egy sokkal rendszerezettebb kódot kapunk
2. Felhasználóbarátabb felfogás: könnyebb elképzelni a struktúrát nekünk designereknek is
3. Lehetőségünk van gyorsan és fájdalommentesen új kontentet/blokkokat beilleszteni
4. Könnyebb átrendezni a tartalmunkat: pl. order segítségével
5. Időt és ideget spórol

Belinkelek egy pent, ahol kipróbálhatjátok a péda kódját!

Ahhoz, hogy elkezdjünk egy grid layoutot felépíteni nem kell semmi különlegeset tennünk. Főleg nem a HTML kódban:

<div class="content">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
</div>

Hozzá pedig a pár sor CSS:

.content {
    display: grid;
    width: 960px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-gap: 20px;
    margin: 0 auto;
}

/* hogy jobban láthatóak legyenek a boxok: */
.content div {
    background: tomato;
    padding: 30px;
}

.content div:nth-child(even) {
    background: skyblue;
}

Elég egy display: grid sor a CSSben. A feladatunk ez után már csak a méretezés és az elhelyezkedések beállítása.

fraction

A grid-template-[columns, rows] segítségével adhatjuk meg, hogy mekkora legyen a rácsunk. Az oszlop és sor számokhoz egy új flexibilis mértékegységet is kaptunk, mégpedig a fraction-t (fr).
A jelentése nagyjából annyi, hogy a content méretünket - szélesség vagy magasság - milyen arányokban akarjuk törni. Akár százalékként is tekinthetünk rá. Jelen esetben oszlopokból 3db van, ami azt jelenti, hogy 1fr pontosan 33.3% lesz. Ha kicseréljük az fr-eket százalékokra ugyanazt az eredményt fogjuk kapni.

grid-template-columns: 33.3% 33.3% 33.3%;

De persze más mértékegységeket is használhatunk.
Életünk megkönnyítésére pedig használjunk repeat() függvényt, így nem kell egymás után beírni az oszlopok méreteit.

grid-template-columns: repeat(3, 1fr);

A soroknál is hasonló a helyzet. Összesen 3 fraction van, abból az első sor 1-et kap a második sor 2-őt.
Abban az esetben, ha az utolsó sorba már nem marad content, a meghatározott méretű helye fenn lesz tartva, de üres lesz.

Mivel nekünk most jobb, ha a sorok dinamikusak, a Codepenes példában odabíztam a Gridre:

grid-auto-rows: minmax(90px, auto);

A minmax() CSS függvény segít nekünk a kívánt sormagasság beállításában. Az első értéke a minimum-, a második pedig a maximális magasság. Jelen esetben ez auto, magyarul a content határozza meg. Viszont ha nincs benne, akkor a minimum érték lesz az alapértelmezett.

A Grid tehát dinamikusan is fel tudja tölteni a sorokat és az oszlopokat. Ezt a grid-auto-flow: [column, row] segítségével tudjuk kontrollálni. Az elhelyezési módszereket majd a harmadik postban tárgyaljuk ki!

Megadhatunk grid-gap-eket is, amikkel el tudjuk szeparálni az egyes elemeket. Külön is meg lehet adni oszlopokra, sorokra. Az első érték a sorok a második az oszlopok közötti térközre fog vonatkozni. A mértékegységeket itt is meg tudjuk válogatni!

• px
• em, rem
• vmin, vmax
• cm
• %

Pozícionáljunk!

A Grid Layout előnye talán itt jön ki a legjobban. Annyi lehetőségünk van a boxokkal, mint a Legóban… Kb… 🙄
Elhelyezhetjük a dolgainkat a html-ben meghatározott sorrendben, de felállíthatunk egy újat is. Sorszámozhatjuk a diveket, hogy később csak át kelljen írni pár sorszámot az új elrendezéshez. Ha jól írtuk meg a kódot nem fog összekuszálódni. De ha vizuálisak akarunk maradni, akkor használhatunk grid-areas-t is. Erről később!

Egy fontos szabály van, mégpedig az, hogy itt kicsit máshogyan kell oszlopokban és sorokban gondolkodni. Ha Photoshopban 12 oszlopos elrendezést csinálunk - a térközöktől eltekintünk most - a guideokból 13 db-ot kapunk. 2 guide közzé esik egy oszlop. Ezt kell észben tartani akkor is, amikor CSS-sel pakolgatjuk az oldalunk elemeit.

Csináltam egy ábrát is, hogy könnyebb legyen megérteni:

Ennek alapján ha az első divet egy menünek szántuk, akkor az felül teljes szélességben legyen jelen. Az első vonaltól (guidetól) a negyedikig. Így fog kinézni kóddal:

.one {
    grid-column: 1 / 4;
    grid-row: 1;
}

Ahogy egy box helyét beállítottuk az összes többi hozzá alakítja majd az alapértelmezett helyét.

Én most egy ilyen elrendezést készítettem a példánkhoz:

.one {
  grid-column: 1 / 4;
  grid-row: 1;
}

.two {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.three {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.four {
  grid-column: 1 / 3;
  grid-row: 4 / 6;
}

.six {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.five {
  grid-column: 1 / 4;
  grid-row: 6 / 7;
}

Mint látjátok nem muszáj a HTMLben felállított sorrendet követni, nyugodtan lehet Legózni a boxokkal.

Nézzük milyen lett a grid!

A képen az látszanak a sorok és oszlopok. Illetve az is, hogy 1-1 boxnak mekkora a területe:

grid-template-areas: dope!

Hmmm, a kedvenc új funkcióm!
Gridben megadhatunk az egyes elemeinknek (boxoknak) egy saját nevet.

.one {
  grid-area: nav;
}

.two {
  grid-area: about;
}
stb.

A layoutot nem kell kiszámolni, hogy melyik box hanyadik guideig tartson. Elég a (itt) .content nevű szülőhöz megadni grid-template-areas után a layoutot! Vizuálisan, az előbb definiált nevekkel! Aposztrófók közzé, szóközzel elválasztva beírjuk, hogy az adott sorban milyen contentünk van. Mennyire király már!
Nyilván ez nem mindig praktikus, de a lehetőségünk meg van a kísérletezésre.

  grid-template-areas:
    "nav nav nav nav"
    "post1 post1 about about"
    "post1 post1 about about"
    "post2 post2 ad ad"
    "post2 post2 empty empty"
    "footer footer footer footer"
    ;

Mit csináljunk az üres részekkel? Ide mehet pár “empty” és ennyi. Ez csak egy kis kapargatása a grid-areas-nak, és amúgy magának a Grid Layoutnak. Később beljebb fúrjuk magunkat!

?…

Ennyi bevezető után most azon agyalok, hogy akár wireframek készítéséhez is használhatnánk a Grid Layoutot? Vajon mennyire lenne nehezebb, mint egy Justinmind, Axure, Sketch vagy… Urambocsáss PowerPointtal? 🤦
Nyilván kicsit nehezebb lenne, de a front-end fejlesztő felhasználhatná-e valamennyire a UX-es által készített vázat az éles oldalhoz? Lehetne ezzel optimalizálni kicsit? …vagy inkább üljek vissza Ylands-et játszani? 😁

Challenge

Mint az előző postban írtam Szegedi Istvántól kaptunk egy apró layout kihívást. Ami nyilván egy front-endesnek nem igazán jelent kihívást, de nekem tök kézenfekvő volt, hogy azonnal meg akarom csinálni Grid Layouttal gyakorlás végett!
A megoldást itt láthatjátok.
A wireframet pedig itt. Ha van kedvetek hozzá készítsétek el és linkeljétek be kommentbe!

Jó ismerkedést a Grid Layouttal, legközelebb találkozunk!

_{Borító: Unsplash}