Adaptive design med grid (CSS)
Del 3: 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:

Variabel	Effekt
grid-column-start	Grid-line hvor søjlen skal starte.
grid-column-end	Grid-line hvor søjlen skal slutte.
grid-row-start	Grid-line hvor rækken skal starte.
grid-row-end	Grid-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ærdi	Effekt
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:



eller:



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 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:



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.

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ærdi	Effekt
start	Items er alignet med cellens forkant
end	Items er alignet med cellens bagkant
center	Items er centreret i cellen
stretch	Items 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

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ærdi	Effekt
start	Items er alignet med cellens top
end	Items er alignet med cellens bund
center	Items er centreret i cellen
stretch	Items 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

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.

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ærdi	Effekt
start	Item er alignet med cellens forkant
end	Item er alignet med cellens bagkant
center	Item er centreret i cellen
stretch	Item strækkes til at udfylde cellen i bredden (default)

justify-self: start

justify-self: end

justify-self: center

justify-self: stretch

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ærdi	Effekt
start	Item er alignet med cellens top
end	Item er alignet med cellens bund
center	Item er centreret i cellen
stretch	Item strækkes til at udfylde cellen i højden (default)

align-self: start

align-self: end

align-self: center

align-self: center

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.