Adaptive design med grid (CSS).
Del 1: Søjler, rækker, celler og items

En af de metoder man kan anvende til adaptive design er det der hedder grid. Det er en feature der er kommet med CSS3 og som har store anvendelsesmuligheder.

Det som grid går ud på, er at opdele brugerfladen i søjler og rækker, som man allokerer til forskellige dele af sit layout, f.eks. header, footer, sidebar, osv. Fordelen ved at bruge grid, i stedet for den klassiske tabel, er at grid er fleksibel, så de elementer man har i sit grid kan flyttes rundt og ændre størrelse. I forhold til de udfordringer som er opstået med varierende skærmstørrelser, fordi vi tilgår internettet på mange forskellige devices, giver grid nogle klare designmæssige fordele. Især hvis man kombinerer det med flexbox i sidens layout-elementer.

Grid er, ligesom flexbox, bygget op om en container og items, men modsat flexbox, er der en række strukturelle elementer, som er nødvendige at holde styr på. Så, hvis vi starter fra en ende af:

Containeren og items
Containeren er den overordnede beholder til items, dvs. med enkelte undtagelser, vil dette være en DIV, der kommer umiddelbart efter BODY-tag'en. Variablen man skal bruge er display:grid, dvs. noget i retning af dette her:



Har man brug for det, er der også display:inline-grid.

Sædvanligvis skal man have en del styling på sin container, så normalt vil man have en klasse der indeholder display:grid i stedet. Det behøver strengt taget ikke at være en DIV man bruger. Det skal nødvendigvis være en tag der kan indeholde andre elementer, men det behøver ikke være en DIV. De child-elementer man nu indsætter i grid, bliver nu automatisk til grid items. Også her anbefales at bruge DIV. Selv hvis man skal bruge f.eks. et billede eller en IFRAME til video, er det erfaringsmæssigt bedst at bruge en DIV og have sit billede eller video deri. Lad os sige, at vi har fire items, så kommer det til at se således ud:



Grid line
Grid lines er linjerne der opdeler ens grid. Hvis vi ser på et 3x2 grid, er det overgangen mellem de dannede rækker eller søjler, og man skelner mellem lodrette (column grid lines) og vandrette (row grid lines). Her en lodret grid line fremhævet med rødt:



Grid cell
Grid cell er, som navnet antyder, en celle. Her er det grid cell 2 i første række der er markeret:



Grid track
Grid track er det der er mellem to grid lines der ligger ved siden af hinanden, dvs. en række eller søjle af celler. Her er det grid track mellem 2. og 3. lodrette grid line der er markeret:



Grid area
Grid area er et område bestående af flere sammenhængende celler. Det må gerne være over flere rækker og søjler, men behøver ikke at være det, men kan godt i stedet være en del af et grid track. Her er det grid area mellem 1. og 3. lodrette grid line og 1. og 3. vandrette grid line der er markeret:

Som default er cellerne i ens grid sat til at sidde sammen, men man kunne godt forestille sig, at man ville have noget mellemrum mellem cellerne, svarende til en tabel hvor man har border-collapse:separate og en angivelse af afstanden mellem cellerne med border-spacing.

Variablerne hedder hhv. grid-column-gap og grid-row-gap og en angivelse af den ønskede afstand, f.eks.:


Så cellerne adskilles således:

Man skal være opmærksom på, at der kun kommer afstand mellem cellerne. Afstanden til containerens sider er uændrede.

Det er planen, at de to variabler skal erstattes af column-gap og row-gap dvs. de gamle navne uden præfixet grid-. De nye variabelnavne fungerer allerede for nogle browsere, i de nye versioner. Syntaxen bliver i så fald:



Der er en samlet version af grid-column-gap og grid-row-gap. Denne hedder grid-gap hvor værdierne er grid-row-gap grid-column-gap, i den rækkefølge. Syntaxen bliver således:


Hvis man kun angiver én værdi for grid-gap, sættes grid-row-gap og grid-column-gap til samme værdi.

Variablerne grid-template-columns og grid-template-rows er der hvor man specificerer hvor mange søjler og rækker man vil have, dvs. antallet af celler, og hvilken størrelse cellerns skal have. Der ligger også i de to variabler, at man kan give rækker og søjler et navn. Syntaksen for begge er navnet i kantede paranteser efterfulgt af størrelsen. Ved angivelse af størrelse har man flere muligheder:

absolut størrelse	Fast størrelse f.eks. px, mm, osv.
relativ størrelse	Fast andel af den samlede bredde/højde, dvs. % af samlede bredde/højde
auto	Fleksibel størrelse, svarende til den tilgængelige plads i bredde og højde.
fr	Fraktion af den frie plads i containeren

I praksis vil man kombinere typerne af størrelsesangivelse, efter hvad der er mest hensigtsmæssigt, og dette er problemfrit. Lad os se på nogle eksempler, så det giver mere mening.

Opbygningen
Antallet af rækker og søjler specificeres ved at man angiver en bredde/højde, adskilt med mellemrum. Her er det en container med fire søjler, hvor de yderste er 40px brede og de to inderste er 50px brede. Der er to rækker, hvor den øverste er 20px høj og den nederste er 100px høj:


I modsætning til størrelse, er navngivningen ikke påkrævet. Navnet skrives i kantede paranteser foran bredden. Her navngiver vi anden søjle og første række:


Fordi opbygningen er som den er, kan man derfor godt komme ud for at en celle får to navne, og dette er ikke noget problem.

Har man flere søjler eller rækker med samme størrelse efter hinanden, kan man bruge repeat(), hvor man angiver antal gentagelser og bredde/højde. Her skal man i sagens natur udvise lidt omtanke, hvis man angiver størrelsen i procenter. Koden for en container med 3 søjler à 40px bredde, efterfulgt af en søjle med 100px bredde, vil se således ud:


Hvis man angiver et navn på søjlen/rækken der skal gentages, får disse også sammen navn. Her får vi således tre søjler med navnet test-søjle:


Skal man senere referere til en specifik søjle af de tre, gør med dette ved at skrive navn og nummer, dvs. den tredje af de tre ens søjler hedder "test-søjle 3".


Absolut størrelsesangivelse
Absolut størrelsesangivelse er en fast størrelse, angivet i f.eks. px, mm, cm, osv. I dag, hvor vi har så mange forskellige devices med forskellig skærmopløsning, er px gerne det mest hensigtsmæssige at anvende, f.eks.:




Relativ størrelsesangivelse
Relativ størrelsesangivelse er en fast størrelsesandel, angivet i %. I dag, hvor vi har så mange forskellige devices med forskellig skærmopløsning, er px gerne det mest hensigtsmæssige at anvende, men kode med procentandele er f.eks.:




auto
Fleksibel størrelsesangivelse med auto er den resterende bredde/højde. Til sider kombinerer man ofte elementer der har en fast bredde og elementer der så må bruge den tiloversblevne plads, afhængig af størrelsen på viewporten. Dette kunne f.eks. være et navigationspanel eller en reklamesøjle. For brugere af WordPress er det f.eks. log-in-panelet i højre side. Et grid med tre søjler, hvor de to yderste skal være 100px i bredden, og den midterste søjle tager resten af viewportens bredde bliver således:


Man kan som sådan godt have flere søjler med auto, også ved siden af hinanden, men har man brug for dette, giver det mere mening af bruge fraktion, fr.


fr
Fraktionen fr er egentlig en slags underinddeling af auto, idet en resterende bredde/højde deles op i fraktioner. Skal man have en søjle i 100px bredde og den resterende plads i tre lige store søjler, kommer det til at se således ud:


Søjlerne behøver ikke at være ved siden af hinanden. Her er søjlen på 100px søjle nr. 2 i rækken:


Det indbyrdes størrelsesforhold behøver heller ikke være 1:1. Her er søjlen længst til højre gjort dobbelt så stor som de to andre: