Impliciete trackafmetingen gebruiken op uw CSS-raster

Tot nu toe hebben onze CSS grid-tutorials zich grotendeels gericht op uitdrukkelijk waarden-trackgroottes die we expliciet hebben gedefinieerd. We hebben rijen gebruikt die 200 px hoog zijn, of kolommen die 1fr breed zijn, en we hebben expliciet aangegeven hoeveel we willen. Maar wat als we niet weten (of niet willen) hoeveel tracks we willen? Dat is waar stilzwijgend waarden spelen een rol, laten we een kijkje nemen.

Starterraster

Hier is een basisraster dat u kunt volgen om mee te volgen. Het geeft ons een rastercontainer met 9 rasteritems. Er zijn nog geen kolombreedtes of -grootheden gedefinieerd, dus elk item vult de maximale beschikbare breedte:

Slechts één kolom definiëren

Laten we ons voorstellen dat we één kolom aan de linkerkant willen, en dat we precies weten hoe breed we het willen hebben: 300 px. We kunnen dat definiëren door toe te voegen rooster-sjabloon-kolommen: 300px; naar onze netcontainer. Maar we krijgen geen andere kolommen tenzij we uitdrukkelijk definieer ze:

Dat wil zeggen, tenzij we zeggen dat we willen dat een van de roosteritems wordt geplaatst in (bijvoorbeeld) kolom 3 in rij 1:

.item-3 rasterkolom: 3; rasterrij: 1; 

Dat geeft ons dan extra kolommen buiten ons gedefinieerde raster omdat CSS Grid de beschikbare ruimte en het algoritme voor automatische plaatsing gebruikt om uit te zoeken waar al het andere heen gaat.

Dit is geweldig, en Grid zal aannames doen, zelfs als we meer kolommen willen hebben, zonder dat we ze allemaal moeten definiëren. Maar wat als we willen dat die impliciete nummers, hoe veel er ook zijn, een specifieke breedte hebben? Dat is waar raster-auto-kolommen komt in het spel.

Zeg 'Hallo' tegen grid-automatische kolommen

Als we willen dat alle kolommen naast de eerste 100px breed zijn, kunnen we impliciet verklaren dat:

grid-autocolumn: 100px;

In combinatie met onze expliciete waarde krijgen we het beste van beide werelden. Hier zeggen we dat we de eerste kolom willen hebben 1FR (dat het een fractie van de resterende ruimte inneemt-auto zou hier hetzelfde effect hebben) en dat alle andere kolommen daarna zouden moeten zijn 100px precies:

rooster-sjabloon-kolommen: 1fr; grid-autocolumn: 100px;

Dit geeft ons het volgende:

En als we stellen dat item 3 eigenlijk in kolom 5 moet worden geplaatst, op rij 1, weet Grid hoe breed het is om extra kolommen te maken omdat dit impliciet.

We zijn hier ook niet beperkt tot pixelwaarden; we zouden fractie-eenheden, em-eenheden, zelfs de MinMax () notatie die we in eerdere tutorials hebben besproken.

Niet vergeten grid-auto-rijen

Dat spreekt bijna vanzelf raster-auto-rijen zal hetzelfde doen voor rijen als raster-auto-kolommen doet voor kolommen. Hier is een voorbeeld, waar alle rijen maar de eerste twee op een hoogte van worden vastgesteld 200px.

Conclusie

Veel van de eigenschappen van Grid hebben standaardwaarden die voor u zorgen als u niets anders definieert, maar in sommige gevallen moeten we op zijn minst impliceren wat we willen. Met impliciete spoorafmetingen kunnen we aangeven welke afmeting extra rijen of kolommen moeten zijn, als ze ooit nodig zijn.

Lees verder

  • Impliciete spoorafmetingen spec