Grid-template-kolommen / grid-template-rijen - CSS-trucs

De grid-template-rowsen grid-template-columnseigenschappen zijn de primaire CSS-eigenschappen voor het tot stand brengen van een rasterlay-out, zodra het element een rastercontext ( display: grid;) is.

Er zijn ook -ms-grid-columnsen -ms-grid-rows, die de oude IE-versie hiervan zijn. U kunt Autoprefixing overwegen om ze wel of niet uw oproep te krijgen. Er was ook een rare periode waarin ze waren grid-definition-columnsen grid-definition-rows, maar dat is niets meer.

Hier is een voorbeeld afgeleid van de documentatie van Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Dit bepaalt het aantal rijen / kolommen in het raster en hun afmetingen.

Deze twee eigenschappen ondersteunen een lijst met waarden gescheiden door spaties. Elke waarde definieert een nieuwe kolom / rij door een dimensie in te stellen. Een lijst met 4 waarden resulteert in 4 kolommen / rijen. Een enkele waarde levert een enkele kolom / rij op.

Geaccepteerde waarden zijn lengte (zoals pxof em), percentages, fracties ( frzie hieronder) auto(en fit-content) min-content, max-contenten minmax()of de repeat()functie.

In het codevoorbeeld hierboven betekent dat:

Kolom 1 ( automatisch trefwoord): Kolom wordt aangepast aan de inhoud in de kolom.
Kolom 2 ("100px"): kolom is 100 pixels breed.
Kolom 3 ("1fr"): Kolom neemt een fractie-eenheid van de resterende ruimte in beslag.
Kolom 4 ("2fr"): Kolom neemt twee fractie-eenheden in van de resterende ruimte.

Rij 1 ("50 px"): Rij is 50 pixels hoog.
Rij 2 ("5em"): Rij is 5 ems lang.
Rij 3 ( min-content trefwoord): Rij is zo klein als de inhoud het toelaat.
Rij 4 ( automatisch trefwoord): Rij wordt aangepast aan de inhoud in de rij.

herhaling()

De repeat()functie is speciaal ontworpen voor deze module. Hiermee kunt u een patroon definiëren dat X keer wordt herhaald. Zoals repeat(6, 1fr);. Stel dat u 12 kolommen met gelijke breedte wilt maken, met een marge van 1% van elkaar verwijderd; je zou kunnen definiëren 1fr repeat(11, 1% 1fr). Het is hetzelfde als 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

De fr-eenheid

De freenheid kan worden gebruikt voor grid-rowsen grid-columnswaarden. Het staat voor "fractie van beschikbare ruimte". Beschouw het als percentages voor beschikbare ruimte wanneer u kolommen / rijen met een vaste grootte en op inhoud gebaseerde kolommen hebt verwijderd. Zoals de specificatie zegt:

De verdeling van fractionele ruimte vindt plaats nadat alle 'lengte' of op inhoud gebaseerde rij- en kolomgroottes hun maximum hebben bereikt.

Verwant

Onze beste bron voor alles wat met CSS-rasters te maken heeft, is onze complete gids voor CSS-raster.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.