Handleiding voor CSS-gridlay-out Fr-eenheid

De CSS grid lay-outmodule werd verzonden met een nieuwe CSS-eenheid genaamd de fr eenheid. Zo rechtlijnig als het maar kan zijn, fr is de afkorting van het woord “fractie”. De nieuwe eenheid maakt het mogelijk om het raster snel in te delen in proportionele kolommen of rijen. Dientengevolge, de oprichting van volledig responsieve en flexibele roosters wordt bijna een eitje.

Omdat de fractie-eenheid samen met de rasterlay-outmodule werd geïntroduceerd, kunt u deze in elke browser gebruiken ondersteunt het CSS-raster. Als je ook oudere browsers wilt ondersteunen, is dit een goed idee CSS grid polyfill waarmee je niet alleen de fr eenheid maar ook andere rasterfuncties.

Eenvoudig gebruik

Laten we eerst eens kijken naar a basisrooster die de fractie-eenheid gebruikt. De indeling hieronder verdeelt de ruimte in drie kolommen met gelijke breedte en twee rijen met gelijke hoogte.

De bijbehorende HTML is gemaakt van zes divs gemarkeerd met de .doos klasse, in een .wikkel div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Om de Grid Layout-module te gebruiken, moet u de weergave: raster; CSS-eigenschap aan de verpakking. De roostervormige template-columns property gebruikt de fr eenheid als waarde; de verhouding van de drie kolommen is 1: 1: 1.

Voor de rasterrijen (roostervormige template-rijen eigendom), heb ik de fr eenheid, omdat het alleen zinvol is als de verpakking heeft een vaste hoogte. Anders kan het op sommige apparaten vreemde resultaten opleveren, maar zelfs dan is de fr eenheid behoudt de verhouding (en dit is enorm).

De roostervormige gap eigendom voegt een 10px raster toe tussen de vakken. Als u geen gat wilt, verwijdert u deze eigenschap.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 1fr 1fr; grid-template-rijen: 200 px 200 px; grid-gap: 10px;  .box color: white; text-align: center; tekengrootte: 30 px; opvulling: 25px;  

Merk op dat bovenstaande CSS geen basisstyling zoals achtergrondkleuren bevat. Jij kan vind de volledige code in de demo aan het einde van het artikel.

Verander verhouding

Je kunt natuurlijk niet alleen 1: 1: 1 gebruiken, maar elke gewenste verhouding. Hieronder, ik gebruikte 1: 2: 1 breuken die ook de ruimte verdelen drie kolommen maar de middelste kolom zal zijn tweemaal zo breed als de andere twee.

Ik verhoogde ook de waarde van roostervormige gap zodat je kunt zien hoe het de lay-out verandert. Kortom, de browser trekt de roosterafstand af van de breedte van de viewport (in dit voorbeeld tellen de rasteropeningen op tot 80px), en verdeelt de rest volgens de gegeven breuken.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 2fr 1fr; grid-template-rijen: 200 px 200 px; grid-gap: 40px;  

Combineren fr met andere CSS-eenheden

Jij kan combineren de fr eenheid met andere CSS-eenheden ook. In het onderstaande voorbeeld gebruikte ik bijvoorbeeld de 60% 1fr 2fr verhouding voor mijn raster.

Dus, hoe werkt dit? De browser wijst 60% van de breedte van de viewport toe naar de eerste kolom. Vervolgens verdeelt het de rest van de ruimte in 1: 2 breuken.

Hetzelfde kan ook worden geschreven als 60% 13,333333% 26,66667%. Maar eerlijk gezegd, waarom zou iemand dat formaat willen gebruiken? Een enorm voordeel van een fractie-eenheid is dat het verbetert de leesbaarheid van de code. Bovendien is het dat wel volledig accuraat, omdat het percentageformaat nog steeds slechts 99,9999% bedraagt.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: 60% 1fr 2fr; grid-template-rijen: 200 px 200 px; grid-gap: 10px;  

Afgezien van percentages, je kunt ook andere CSS-eenheden gebruiken samen met de fractie-eenheid bijvoorbeeld pt, px, em, en rem.

Voeg spatie toe met fr

Wat als u niet wilt dat uw ontwerp rommelig en voeg wat spaties toe naar je rooster? De fractie-eenheid heeft daar ook een gemakkelijke oplossing voor.

Zoals je kunt zien, dit raster heeft een lege kolom terwijl het nog steeds alle zes vakken bevat. Voor deze lay-out moeten we de ruimte opdelen in vier kolommen in plaats van drie. Dus gebruiken we de 1fr 1fr 1fr 1fr waarde voor de roostervormige template-columns eigendom.

We voegen de lege kolom toe binnen de roostervormige template-gebieden eigendom, met behulp van de puntnotatie. Kortom, deze eigenschap staat u toe om referentie met rastergebieden. En u kunt rastergebieden een naam geven met de roostervormige area eigendom dat u moet gebruiken afzonderlijk voor elk gebied.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 1fr 1fr 1fr; grid-template-rijen: 200 px 200 px; grid-gap: 10px; grid-template-gebieden: "box-1 box-2. box-3" "box-4 box-5. box-6";  .box-1 grid-area: box-1;  .box-2 grid-area: box-2;  .box-3 grid-area: box-3;  .box-4 grid-area: box-4;  .box-5 grid-area: box-5;  .box-6 grid-area: box-6;  

De witruimten hoeven niet per se een kolom te vormen, ze kan overal zijn in het rooster.

De herhaling() functie

U kunt ook de fr eenheid samen met de herhaling() functie voor een eenvoudigere syntaxis. , dit is niet nodig als je alleen een eenvoudig raster hebt, maar van pas komt als je dat wilt een gecompliceerde lay-out implementeren, bijvoorbeeld een genest raster.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (3, 1fr); / * rooster-sjabloon-kolommen: 1fr 1fr 1fr; * / grid-template-rijen: 200 px; grid-gap: 10px;  

De herhaal (3, 1fr) syntaxis resultaten in dezelfde lay-out zoals 1fr 1fr 1fr. De onderstaande lay-out is hetzelfde als het eerste voorbeeld.

als jij verhoog de vermenigvuldiger binnen in de herhaling() functie heb je meer kolommen. Bijvoorbeeld, herhaal (6, 1fr) resulteert in zes gelijke kolommen. In dit geval al onze dozen bevindt zich in dezelfde rij, wat betekent dat het genoeg is om slechts één waarde (200px) te gebruiken voor de roostervormige template-rijen eigendom.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: herhaal (6, 1fr); grid-template-rijen: 200px; grid-gap: 10px;  

Je kunt gebruiken herhaling() meerdere keren. Het volgende voorbeeld resulteert bijvoorbeeld in een raster waarin de laatste drie kolommen staan tweemaal zo breed als de eerste drie.

 .wrapper weergave: raster; rooster-sjabloon-kolommen: herhaal (3, 1fr) herhaling (3, 2fr); grid-template-rijen: 200px; grid-gap: 10px;  

Je kan ook combineren herhaling() met andere CSS-eenheden. Je zou bijvoorbeeld kunnen gebruiken 200px herhaling (4, 1fr) 200px als een geldige code.

Als je geïnteresseerd bent in hoe maak complexe lay-outs met de CSS Grid-module, de herhaling() functie en de fr unit Rachel Andrew heeft een interessante blogpost over hoe je dat kunt doen.

Een demo om te experimenteren

Tenslotte, hier is de demo die ik beloofd heb. Het gebruikt dezelfde code als het eerste voorbeeld in dit artikel. Vork het, en kijk wat je kunt bereiken met de fr eenheid.