Share
In elk CSS-raster heeft elke regel een indexnummer waarnaar we kunnen verwijzen om rasteritems te plaatsen. We kunnen echter ook elk van deze rasterlijnen een naam geven, waardoor het gemakkelijker wordt om met onze rasterlay-outs te werken en te onderhouden. Laten we kijken!
De meest voorkomende reactie op een willekeurige raster-tutorial is "maar wanneer kan ik dit gebruiken?" En het is een eerlijke vraag. Het feit is: Grid is komen, en het zal hier snel zijn.
"CSS Grid wordt in maart 2017 standaard ondersteund in Chrome en Firefox." - Eric Meyer
Als je er nog niet naar hebt gekeken, is dit het moment!
Wanneer we een raster declareren, krijgt elke regel een indexnummer:
Notitie: Tenzij de lay-out is ingesteld met richting: rtl;, deze nummers beginnen linksboven in het raster en werken naar rechtsonder.
We kunnen naar deze nummers verwijzen om rasteritems te plaatsen:
.item grid-column: 2; rasterrij: 3;
In dit voorbeeld onze .item element wordt gepositioneerd beginnend op kolom regel 2 en rij regel 3:
Bij complexere rasters kunt u zich voorstellen dat het verwijzen naar alles op nummer een beetje verwarrend kan zijn. Daarom stelt de Grid-module ons in staat om expliciet onze regels te benoemen wanneer we onze rasterkolommen en -rijen declareren.
Laten we een voorbeeld gebruiken zoals de voorbeelden die we in deze serie hebben gebruikt. Dit is onze eenvoudige 3 × 3-netverklaring:
.grid-1 display: grid; rooster-sjabloon-kolommen: 100px auto 100px; rooster-sjabloon-rijen: 60px 130px 50px; grid-gap: 20px;
Nu kunnen we onze kolom- en rijwaarden omzetten met regelnamen (wat we ook willen), met vierkante haken:
.grid-1 display: grid; rooster-sjabloon-kolommen: [start] 100px [midden start] automatisch [laatste kolom start] 100px [einde]; grid-template-rijen: [header-start] 60px [hoofdstart] 130px [main-end] 50px [rij-einde]; grid-gap: 20px;
We kunnen items nu plaatsen met namen, in plaats van nummers:
.item grid-column: center-start; grid-row: header-start;
Enkele tips:
Accentsconagua
[main-end footer-start rij-5] enz.Wanneer we opzettelijk dingen doen, zoals het noemen van rasterlijnen, zou dat zo zijn uitdrukkelijk. Wanneer iets wordt geïmpliceerd, maar niet direct wordt vermeld, wordt dat het zijn genoemd stilzwijgend. We hebben het expliciet noemen van rasterlijnen benoemd, maar er zijn ook omstandigheden waarin lijnen impliciet namen krijgen.
Mogelijk herinnert u zich uit een eerdere zelfstudie dat het mogelijk is rastergebieden te definiëren.
We kunnen vier rastergebieden als volgt definiëren:
.grid-1 / * ... bestaande stijlen * / grid-sjabloon-gebieden: "header header header" "main main sidebar" "footer footer footer";
Dit geeft ons het volgende:
Een rastergebied een naam geven hoofd wijst automatisch ook namen toe aan zijn vier grenslijnen. De rijlijnen eromheen worden header-start en kop-end, en eveneens worden de twee kolomlijnen ook header-start en kop-end. Hetzelfde geldt voor de andere gebieden, die lijnnamen krijgen main-start, main-end, sidebar-start enzovoorts.
Notitie: Terugkijken op dingen die expliciet namen met dezelfde indeling toevoegen (header-start en kop-end) maakt een benoemd rastergebied van hoofd.
We kunnen deze lijnnamen gebruiken zoals we eerder hebben gedaan om items te positioneren. En nogmaals, ze bestaan naast de namen die u zelf definieert, en de originele regelindexnummers.
Dat is het voor deze snelle tip! Vergeet niet: maak er een gewoonte van om uw lijnen en gebieden een naam te geven voor eenvoudiger beheer en onderhoud van het netwerk.
