Accentsconagua
Share
Hoe we de lay-out op het web benaderen, is aan het veranderen, en in de voorhoede van die verandering is CSS Grid Layout. Deze bijgewerkte snelstartgids slaat de details en nuances over, maar helpt u nu vast te zitten.
CSS Grid Layout (bekend bij zijn vrienden als "Grid") is het afgelopen jaar flink opgeschoten en als zodanig vind je tegenwoordig browserondersteuning voor het behoorlijk solide.
caniuse.comMet raster kunnen we elementen op een pagina rangschikken, op basis van regio's die door gidsen zijn gemaakt.
Op hun eenvoudigst deze gidsen, of rasterlijnen, kader horizontaal en verticaal rastersporen. Rasterpaden dienen als rijen en kolommen, met goten rennen tussen hen in. Waar horizontale en verticale rastersporen elkaar kruisen, blijven we achter cellen, net zoals we gebruiken bij tafels. Dit zijn allemaal belangrijke termen om te begrijpen.
In de onderstaande afbeelding ziet u een demo-raster met de volgende elementen:
Een basisraster waarin rasterlijnen, kolommen, rijen en cellen worden gemarkeerdVoor een grafische lay-out lijkt het misschien meer vertrouwd als we exact hetzelfde raster gebruiken, maar deel sommige tracks om ons goten tussen inhoudsgebieden te geven.
Hetzelfde raster, maar deze keer heeft het een treffende gelijkenis met de Finse vlagEr is nog een laatste termijn die we moeten verduidelijken voordat we verdergaan:
Een van de vele mogelijke rastergebieden op ons demo-rasterEEN rastergebied is een deel van ons raster omheind door vier rasterlijnen; het kan een willekeurig aantal rastercellen omvatten.
Tijd om dit raster in de browser te bouwen! Laten we beginnen met een paar markeringen.
Om het bovenstaande raster opnieuw te maken, hebben we een containerelement nodig; wat je maar leuk vindt:
Daarin gaan we negen onderliggende elementen plaatsen.
Vork deze startpen als je mee wilt doen. Ik heb enkele basisstijlen toegevoegd om elk rasteronderdeel visueel van elkaar te onderscheiden.
Eerst moeten we verklaren dat ons containerelement een raster is met een nieuwe waarde voor de tonen eigendom:
.grid-1 display: grid;
Ja, dat was makkelijk. Vervolgens moeten we ons raster definiëren door te zeggen hoeveel rastersporen het zal hebben, zowel horizontaal als verticaal. Dat doen we met de roostervormige template-columns en roostervormige template-rijen eigenschappen:
.grid-1 display: grid; rooster-sjabloon-kolommen: 150px 150px 150px; grid-template-rows: auto auto auto;
Je zult drie waarden voor elk opmerken. De waarden voor roostervormige template-columns stel dat "alle drie de kolommen 150px breed" moeten zijn. De drie waarden voor roostervormige template-rijen zeg iets soortgelijks. Elk zou eigenlijk zijn auto standaard neemt het de hoogte van de inhoud, maar we hebben ze hier vermeld om duidelijk te visualiseren wat er aan de hand is.
Dus wat hebben we nu?
Aan elk van onze items is automatisch een rastergebied toegewezen in chronologische volgorde. Het is niet slecht, maar we missen goten. Tijd om dat op te lossen.
Grid wordt geleverd met een speciaal ontwikkelde oplossing om gootmetingen uit te voeren. We kunnen gebruiken roostervormige kolom gap en roostervormige rij-gap, of de steno roostervormige gap eigendom.
Laten we een vaste goot van 20px toevoegen aan onze .roostervormige 1 element.
.grid-1 display: grid; rooster-sjabloon-kolommen: 150px 150px 150px; grid-template-rows: auto auto auto; grid-gap: 20px;
En nu blijven we achter met een mooi, net rooster:
Dat is alles, u bent aan de slag met Grid! Laten we de vier essentiële stappen samenvatten:
weergave: raster;.roostervormige template-columns en roostervormige template-rijen eigenschappen.roostervormige gap eigenschappen.In het volgende deel van deze serie gaan we dieper in op de syntaxis van Grid, verkennen we flexibele lay-outs, de fr eenheid, de herhaling() functie, en neem ons eenvoudige raster veel verder. Zie je daar!
