There should be a CSS Grid

Zvonimir Dimovski Tehnologije, CSS Grid
There should be a CSS Grid

Frontend developeri sigurno znaju sve probleme pri izradi layouta koristeći «floatove», «clearfixove», «inline-blockove» ili relativna/apsolutna pozicioniranja. Nažalost, mnogi te načine i danas koriste, ne zato što su oduševljeni raditi na taj «hacky» način, nego su primorani zbog podrške u starijim browserima.

Sve većim potrebama za korištenjem sučelja koja moraju biti responzivna (istodobno prilagođena za desktop i mobilne uređaje) postupak izrade dodatno se komplicira. Često se događalo da elementi na web stranici ne smiju biti linearno poredani na svakoj od potrebnih veličina (viewportova) pa su se radile raznorazne intervencije s JavaScriptom kako bi se promijenila struktura HTML elemenata i prilagodila posebno za svaki viewport.  

Nedavno smo počeli koristiti «flexbox» i napokon je svijet opet imao smisla. Flexbox je odličan, ali ima mali «problem» - dizajniran je kao jednodimenzionalni model, odnosno način kako poredati elemente unutar reda ili kolone. 

Nastalu prazninu gdje bi se kompletan layout stavio u širu sliku popunio je CSS Grid. CSS Grid je dvodimenzionalno baziran grid sistem za izradu layouta. Ima li više potrebe za flexboxom? Dakako da ima jer je kombinacija CSS Grida i flexboxa budućnost izrade web sučelja, gdje bi se Grid koristio za generalnu definiciju layouta, dok bi se flexbox koristio za izradu pojedinih UI elemenata.

Terminologija

Grid container - bilo koji HTML element koji služi kao «container», odnosno onaj element koji je namijenjen grid strukturi (u CSS-u: display: grid).

grid container


Grid item - izravni nasljednik grid containera (samo onaj na prvoj razini) koji automatski postaje grid item.

grid item

Grid line - horizontalna (red) ili vertikalna (kolona) linija koja razdvaja grid u sekcije. Linije su numerirane po defaultu, a počinju i završavaju kao vanjski «borderi» grida.

grid line

Grid cell - ćelija unutar grida.

grid cell

Grid area - pravokutno područje između određenog broja grid linija (u slučaju na slici - između 4 grid linije). Grid area može pokrivati jednu ili više ćelija.

grid area


Grid track - prostor između dvije susjedne grid linije. Možemo ih gledati horiznotalno kao red (na slici) ili vertikalno kao kolonu.

grid track


Grid gap - prazan prostor između Grid trackova, a većina ih zna po nazivu «gutter» iz popularnih frameworka poput Bootstrapa.

grid gap

Let's write some code

Veliki sam fan učenja novih stvari kroz primjere pa, kako biste najlakše shvatili ove koncepte iz terminologije (barem neke), kroz primjer ću ih staviti u realan kontekst.

U ovom jednostavnom primjeru želim napraviti strukturu koju često možemo vidjeti na današnjem webu pa ćemo koristiti CSS Grid za generalnu definiciju (crveni elementi) i flexbox (za plave elemente na slici).

grid web

Kod i prikaz dostupni na linku - https://codepen.io/zvonch/pen/NvezVp

Procedura za stvaranje grid layouta prilično je jednostavna:

1. Definiramo element unutar kojega ćemo slagati grid strukturu (u našem slučaju div.container).

2. Definiramo elemente unutar grida (u našem slučaju div.box).

3. (Tri) Ne postoji :)

U ovom primjeru koristili smo «malo čudniju» sintaksu u CSS-u, koja u prvi mah zahtijeva dodatna objašnjenja:

- grid-template-columns: 1fr 1fr 1fr - definiran broj i širine kolona (3 kolone - 1fr 1fr 1fr), dok svaka kolona ima širinu 1fr (nova jedinica u CSS-u, a znači «fraction»). Na slici ispod objašnjeno je kako fractioni rade

fr fraction unit


- na zadnji .box element stavljena je dodatna klasa .last-row zato da bismo zadnji element proširili na punu (100 %) širinu grida. Kako bismo dobili takav rezultat, korišten je grid-column: 1/4; drugim riječima, proširi ovaj element od početka do kraja grida (3 col grid ima ukupno 4 grid linije). Brojevi označavaju grid linije - prvi broj je prva grid linija, a drugi zadnja grid linija - grid-column: <start-line> / <end-line> ). Primjer na slici ispod:

grid web linije


Browser podrška CSS Grida:

  • IE 11
  • Edge
  • Firefox 52 +
  • Chrome 58 +
  • Safari 10.1 +
  • Opera 46+
  • iOS Safari 10.3 +
  • Android browser 56+
  • Chrome za Android 59+

Više informacija - https://caniuse.com/#feat=css-grid 

Na ovom jednostavnom primjeru koji prikazuje samo djelić CSS Grida već se može vidjeti velika važnost za frontend developere, sve te metode već se danas mogu koristiti u praksi. Naravno, uvijek ostaje problem podrške u browserima koja je glavna prepreka u masovnijem korištenju. 

meme