Share
In deze zelfstudie nemen we het raster van onze vorige zelfstudie en gebruiken het als een speelterrein om verder in Grid te kijken. We verbeteren de manier waarop we onze dakgoten definiëren, verkennen flexibele lay-outs, de fr eenheid, en introduceer de herhaling() functie.
Het hele punt van Grid is om ons in staat te stellen de lay-out op het web goed te beheren, dus laten we onze statische rastervloeistof maken voordat we verder gaan. Als je je dit herinnert, hebben we ons raster gedefinieerd met statische pixelmetingen:
rooster-sjabloon-kolommen: 150px 150px 150px; grid-template-rows: auto auto auto; grid-gap: 20px;
Het is heel goed mogelijk om hier ook andere eenheden te gebruiken, zoals ems of rems bijvoorbeeld. Of nog meer ongewone eenheden zoals vh en vmin.
In dit geval gaan we onze pixeleenheden voor percentages wijzigen.
rooster-sjabloon-kolommen: 33,33% 33,33% 33,33%;
Hmm, dat is een beetje rommelig, maar het doet het werk wel. U zult merken dat de kolombreedtes nu oplopen tot 100%; onze dakgoten worden automatisch van ze afgetrokken. roostervormige gap zullen vaste of flexibele eenheden accepteren, wat betekent dat we vloeiende kolommen en vaste dakgoten perfect kunnen combineren zonder ingewikkelde berekeningen van onze kant.
Laten we schrijven dat dit een nettere manier is, met behulp van de herhaling() functie:
rooster-sjabloon-kolommen: herhaling (3, 33,33%);
Dit stelt "Herhaal 33,33% drie keer" geeft ons drie kolommen. En dat doen we niet eens nodig hebben de roostervormige template-rijen verklaring omdat het auto waarde wordt hoe dan ook toegewezen als standaard.
Notitie: wanneer kolommen worden gedefinieerd met behulp van% -waarden, gebruiken ze precies die waarden en voegen ze die toe roostervormige gap bovenop. Je zult zien dat het bovenstaande rooster naar rechts is geduwd omdat het nu 99,99% breed is plus de grid-gaps.
Een laatste verbetering kan worden aangebracht in ons eenvoudige raster en het zal het probleem van de breedte oplossen dat we net noemden; we gaan het introduceren fr, of fractie eenheid. Een enkele fr-eenheid beschrijft "Een stuk van de vele stukken waarin we dit verdelen". We kunnen bijvoorbeeld onze kolommen declareren met behulp van:
rooster-sjabloon-kolommen: 1fr 1fr 1fr;
Hier zijn er in totaal drie fr-eenheden, dus elke kolom zou een derde breedte hebben. Hier is nog een voorbeeld:
rooster-sjabloon-kolommen: 2fr 1fr 1fr
Nu zijn er in totaal vier fr-eenheden, dus de eerste kolom zou de helft van de beschikbare breedte innemen, waarbij de andere twee kolommen elk een kwart in beslag nemen.
Deze eenheden zijn echt krachtig, vooral in combinatie met andere meeteenheden:
rooster-sjabloon-kolommen: 300px 1fr 3fr 20%;
Hier hebben we vier kolommen verklaard:
Het ziet er als volgt uit, waarbij auto-plaatsing perfect wordt benadrukt terwijl onze negen items verschuiven om de gaten op te vullen:
Maar terug naar ons oorspronkelijke schema. Laten we de onhandige en onnauwkeurige waarde van 33,33% vervangen door 1fr:
rooster-sjabloon-kolommen: herhaling (3, 1fr);
Voltooide pen:
Dus, om samen te vatten:
Accentsconagua
herhaling() functie bespaart ons tijd en houdt onze stylesheets onderhoudbaar.We hebben een lange weg afgelegd in slechts twee tutorials, maar je bent nu de trotse eigenaar van een heel netjes en bondig raster! In de volgende tutorial zullen we rastergebieden verkennen, een kijkje nemen op de span zoekwoord en enkele praktische lay-outs.
fr eenheid op W3C