Share
In eerdere zelfstudies hebben we geleerd hoe een raster in te stellen en de expliciete eigenschappen ervan te definiëren (zoals roostervormige template-columns en roostervormige template-gebieden) en zelfs enkele van de impliciete eigenschappen ervan (zoals raster-auto-kolommen). In deze tutorial gaan we naar de steno-eigenschap kijken rooster die al het bovenstaande snel behandelt in een enkele verklaring.
Zoals gewoonlijk, begin met te verklaren weergave: raster; op uw container. Gebruik vervolgens de rooster eigenschap om uw rijen in te delen, en vervolgens uw kolommen:
.grid-1 display: grid; raster: 100px auto 300px / repeat (2, 1fr) 100px;
De bovenstaande verklaring zegt dat we drie expliciete rijen van 100px, auto en 300px willen. En (met behulp van de herhaling() functie) twee kolommen van 1fr, dan een van 100px. Het is precies hetzelfde als deze langere versie:
.grid-1 display: grid; grid-template-rijen: 100px auto 300px; rooster-sjabloon-kolommen: herhaling (2, 1fr) 100px;
Beide verklaringen geven ons dit:
Impliciete waarden vragen we Grid te gebruiken buiten de expliciete waarden die we definiëren. In de rooster stengel, we kunnen de twee niet combineren, dus we moeten een keuze maken. Bekijk dit bijvoorbeeld:
.grid-1 display: grid; raster: auto-flow 100px / 1fr 100px;
In dit geval zitten we met expliciete kolommen (een van 1fr, een andere van 100px) maar onze rijen gebruiken een verkorte vorm van raster-auto-flow en raster-auto-rijen. Het zegt "Wanneer u meer tracks aan het raster moet toevoegen, voegt u ze als rijen toe. En maak ze allemaal 100px hoog. " Het is hetzelfde als dit:
.grid-1 display: grid; rooster-sjabloon-kolommen: 1fr 100px; grid-auto-flow: rij; grid-auto-rijen: 100px;
Dit is een redelijk standaardgedrag, maar we zien een grotere verandering als we in plaats daarvan ons impliciete raster vragen om extra kolommen te gebruiken:
.grid-1 display: grid; raster: 100px 300px / auto-flow 100px;
Dit geeft ons twee rijen van 100px en 300px, waarna deze effectief worden ingesteld grid-auto-flow: kolom;. Het is hetzelfde als:
.grid-1 display: grid; rooster-sjabloon-rijen: 100px 300px; grid-auto-flow: kolom; grid-autocolumn: 100px;
Het algoritme voor automatische plaatsing plaatst items van boven naar beneden en voegt rechts kolommen toe als er onvoldoende ruimte is:
Notitie: we kunnen niet verklaren auto-flow op beide rijen en kolommen, dat zal niet werken.
Als je terugdenkt aan onze tutorial. Inzicht in het CSS-raster "Auto-Placement Algorithm" onthoudt dat we het hebben besproken dun en dicht; sleutelwoorden die beschrijven hoe items in een raster worden verpakt. Deze kunnen ook naast elkaar worden gebruikt auto-flow, zoals dit:
.grid-1 display: grid; raster: 100px 300px / auto-flow dicht 100px;
Sjabloongebieden zijn een manier om delen van ons raster te benoemen, op een bijna visueel representatieve manier. In zijn eenvoudigste vorm zouden we het gewoon gebruiken rooster om onze sjabloongebieden en niets anders te beschrijven:
.grid-1 display: grid; grid: "header header header" "main main sidebar" "footer footer footer";
Vervolgens geven we aan welk gebied elk rasteritem vult, zoals dit:
.item-1 grid-area: header;
Als u zich de handleiding van onze oorspronkelijke sjabloongebieden herinnert, hadden we wat meer details om ons kolom- en rijafmetingen te geven:
.grid-1 display: grid; rooster-sjabloon-kolommen: herhaling (3, 1fr); rooster-sjabloon-rijen: 80px 180px 80px; rooster-sjabloon-gebieden: "header header header" "main main sidebar" "footer footer footer";
We kunnen dat ook als volgt doen:
.grid-1 display: grid; grid: "header header header" 80px "main main sidebar" 180px "footer footer footer" 80px / 1fr 1fr 1fr;
We voegen de kolombreedtes na de schuine streep toe (de herhaling() functie zal in dit geval niet werken, maar ik weet niet waarom). En we voegen de rijhoogten inline toe na de gebiedsverklaringen. Dit is wat we eindigen met:
Deze tutorial zou je inzicht moeten geven in hoe het rooster steno eigendom werkt. Speel ermee, bekijk welke andere aspecten van de CSS Grid-module u ermee kunt gebruiken en laat ons weten hoeveel tijd u bespaart!
Accentsconagua