Adaptive design med grid (CSS)
Del 3: Placering af items





Placering af items

Når man har sit grid med søjler og rækker på plads, kan man begynde at placere items. Dette gør man med flg. variabler:

VariabelEffekt
grid-column-startGrid-line hvor søjlen skal starte.
grid-column-endGrid-line hvor søjlen skal slutte.
grid-row-startGrid-line hvor rækken skal starte.
grid-row-endGrid-line hvor rækken skal slutte.

Bemærk: Selv om variablernes navne refererer til række og søjler, er de værdier man sætter for variablerne reelt grid-lines.


Værdierne som de fire variabler kan antage er:

VærdiEffekt
line <number>Liniens nummer.
line <name>Liniens navn. Kun hvis man har specificeret et navn.
span <number>Antal grid-lines item skal strække sig over.
span <name>Item skal strække sig over grid-lines til det når et grid-line med det specificerede navn.
auto Automatisk placering, automatisk antal gridlines item skal strække sig over eller en defaultværdi på én gridline, som item skal strække sig over.


Så, hvis man skal udfylde item-1 som cellerne markeret med rødt:



Kan det f.eks. være:

.item-1 {
   grid-column-start: 3;
   grid-column-end: 6;
   grid-row-start: 1;
   grid-row-end: 3;
}


eller:

.item-1 {
   grid-column-start: 3;
   grid-column-end: span 3;
   grid-row-start: 1;
   grid-row-end: span 2;
}


Hvis man ikke specificerer grid-column-end og/eller grid-row-end, sættes disse til defaultværdien 1.

Man kan godt have items der overlapper. Man skal i så fald anvende z-index for at styre rækkefølgen for lagene.


Hvis man ønsker det, har man også de to sammensatte parametre grid-column og grid-row som er sat sammen af hhv. grid-column-start + grid-column-end og grid-row-start + grid-row-end. Syntaxen er

grid-column: <start-line> / <end-line> eller <start-line> / span <value>;
grid-row: <start-line> / <end-line> eller <start-line> / span <value>;

Bemærk at start og slut adskilles med skråstreg. Generel anbefaling herfra er, ikke at anvende de sammensatte parametre, da deres anvendelse er på bekostning af overskueligheden af koden.






Parameteren grid-area

Parameteren grid-area kan bruges til to formål: som navngivning af et grid-area og som en komprimeret specifikation af grid-row-start + grid-column-start + grid-row-end + grid-column-end. Syntaxen er:

grid-area: <navn> <row-start> / <column-start> / <row-end> / <column-end>;

Bemærk der er mellemrum mellem navn og rækkernes start/slut, mens koordinaterne for udbredelsen er adskilt med skråstreg. Hvis vi tager item-1 vist oven over, og siger den skal have navnet Testområde, så bliver koden:

.item-1 {
   grid-area: Testområde 1 / 3 / 3 / 6;
}


Anbefalingen herfra er, ikke at anvende grid-area til andet end navngivningen, da angivelsen af start/slut vil være på bekostning af overskueligheden af koden.


Udslutning af items for hele containeren

Udslutningen af ens items i alle containerens celler styres af justify-items som anvendes på containeren. Det er helt analogt til udslutning af tekst og udslutning af items i flexbox. Værdierne som justify-items kan antage er:

VærdiEffekt
startItems er alignet med cellens forkant
endItems er alignet med cellens bagkant
centerItems er centreret i cellen
stretchItems strækkes til at udfylde cellen i bredden (default)


I de nedenstående eksempler har alle celler samme udslutning, eftersom parameteren bruges på containeren, men udslutningen kan sættes individuelt for hver celle, hvis man vil. I så fald skal man specificere dette med parameteren justify-self, som anvendes på de enkelte items (gennemgået længere nede).

justify-items: start


justify-items: end


justify-items: center


justify-items: stretch



Lodret udslutning af items for hele containeren

Den lodrette placering af items i cellerne styres af align-items, og er helt analog til vertical-align for tekst. Parameteren kan antage flg. værdier:

VærdiEffekt
startItems er alignet med cellens top
endItems er alignet med cellens bund
centerItems er centreret i cellen
stretchItems strækkes til at udfylde cellen i højden (default)


I de nedenstående eksempler har alle celler samme alignment, men dette kan sættes individuelt for hver celle, hvis man vil. I så fald skal man specificere dette med parameteren align-self på de enkelte items (gennemgået længere nede).

align-items: start


align-items: end


align-items: end


align-items: stretch



Vandret og lodret udslutning samtidig for hele containeren

Variablen place-items er en sammentrækning af align-items og justify-items. Syntaxen er place-items: align-items / justify-items (bemærk skråstreg som adskiller). Angives der kun én værdi for denne variabel, anvender place-items værdien til både align-items og justify-items. Variablen understøttes angiveligt ikke af Edge-browseren pt., så man bør overveje om det er en variabel man vil bruge, eller evt. teste om den er kommet til at fungere efter denne side er skrevet. Som altid frarådes herfra at bruge disse sammentrukne variabler, da man mister overskuelighed i koden.


Udslutning af items for specifikke celler

Udslutningen af items i specifikke celler i containeren styres af justify-self som anvendes på item. Hvis man med justify-self specificere en anden udslutning end justify-items for containeren, er justify-self den bestemmende parameter. Der er til justify-self flg. værdier:

VærdiEffekt
startItem er alignet med cellens forkant
endItem er alignet med cellens bagkant
centerItem er centreret i cellen
stretchItem strækkes til at udfylde cellen i bredden (default)



justify-self: start


justify-self: end


justify-self: center


justify-self: stretch



Lodret udslutning af items for specifikke celler

Den lodrette placering af items i specifikke celler styres af align-self, som anvendes på item. Hvis man med align-self specificere en anden udslutning end align-items for containeren, er align-self den bestemmende parameter. Der er til align-self flg. værdier:

VærdiEffekt
startItem er alignet med cellens top
endItem er alignet med cellens bund
centerItem er centreret i cellen
stretchItem strækkes til at udfylde cellen i højden (default)



align-self: start


align-self: end


align-self: center


align-self: center



Vandret og lodret udslutning af items for specifikke celler

Variablen place-self er en sammentrækning af align-self og justify-self. Syntaxen er place-self: align-self / justify-self (bemærk skråstreg som adskiller). Angives der kun én værdi for denne variabel, anvender place-self værdien til både align-self og justify-self. Variablen understøttes angiveligt ikke af Edge-browseren pt., så man bør overveje om det er en variabel man vil bruge, eller evt. teste om den er kommet til at fungere efter denne side er skrevet. Som altid frarådes herfra at bruge disse sammentrukne variabler, da man mister overskuelighed i koden.