Egenskaberne grid-template-rowsog grid-template-columnser de primære CSS-egenskaber til etablering af et gitterlayout, når elementet først er en gitterkontekst ( display: grid;).
Der er også, -ms-grid-columnsog -ms-grid-rowssom er den gamle IE-version af dette. Det kan være en god idé at overveje Autoprefixing for at få dem, eller ej, dit opkald. Der var også en underlig periode, hvor de var grid-definition-columnsog grid-definition-rows, men det er ikke noget mere.
Her er et eksempel afledt af Microsofts dokumentation:
.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )Dette definerer antallet af rækker / kolonner i gitteret samt deres dimension.
Disse to egenskaber understøtter en liste over værdier adskilt af mellemrum. Hver værdi definerer en ny kolonne / række ved at indstille en dimension. En liste med 4 værdier vil resultere i 4 kolonner / rækker. En enkelt værdi producerer en enkelt kolonne / række.
Accepterede værdier omfatter længde (ligesom pxeller em), procenter, fraktioner ( fr; se nedenfor), auto(eller fit-content), min-content, max-content, og minmax(), eller repeat()funktion.
I kodeeksemplet ovenfor betyder det:
- Kolonne 1 ( automatisk nøgleord): Kolonne tilpasses indholdet i kolonnen.
- Kolonne 2 (“100 pixel”): Kolonne er 100 pixels bred.
- Kolonne 3 (“1fr”): Kolonne optager en brøkdel af det resterende rum.
- Kolonne 4 (“2fr”): Kolonne optager to fraktionsenheder af det resterende rum.
- Række 1 (“50px”): Rækken er 50 pixels høj.
- Række 2 (“5em”): Række er 5 ems høj.
- Række 3 ( nøgleord med mint indhold ): Række er så lille, som indholdet lader det være.
- Række 4 ( automatisk nøgleord): Række er tilpasset indholdet i rækken.
gentage()
Den repeat()funktion er specielt designet til dette modul. Det giver dig mulighed for at definere et mønster, der gentages X gange. Ligesom repeat(6, 1fr);. Lad os sige, at du vil lave 12 kolonner med lige bredde, der er adskilt fra hinanden med en margin på 1%; du kunne definere 1fr repeat(11, 1% 1fr). Det er det samme som 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.
Den fr enhed
Den frenhed kan bruges til grid-rowsog grid-columnsværdier. Det står for "brøkdel af ledig plads". Tænk på det som procenter for ledig plads, når du har taget faste og indholdsbaserede kolonner / rækker af. Som spec siger:
Fordelingen af fraktioneret plads sker, når alle 'længde' eller indholdsbaserede række- og kolonnestørrelser har nået deres maksimum.
Relaterede
Vores bedste ressource til alle ting CSS grid er vores komplette guide til CSS Grid.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 57 | 52 | 11 * | 16 | 10.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |