Een uitgebreide gids voor het gebruik van CSS Grid

Inhoud

• Wat is CSS Grid?
• Hoe het raster te definiëren
• Items positioneren met regelnummers
• Items positioneren met behulp van gebiedsnamen
• Hoe u een responsieve lay-out maakt met CSS Grid
• CSS Grid-fallbacks voor oudere browsers
• CSS Grid-bronnen

Hoe het raster te definiëren
Plaats items met regelnummers
Plaats items met behulp van gebiedsnamen
Creëer een responsieve lay-out
Fallbacks voor oudere browsers
CSS Grid-bronnen

De CSS Grid Layout-module introduceert een nieuw en veelzijdig systeem voor het positioneren van elementen binnen een website-layout door het gebruik van een zeer aanpasbaar grid. CSS Grid wordt nu ondersteund door de laatste twee versies van alle grote browsers, dus het wordt tijd dat we het in al onze projecten gaan toepassen. In deze tutorial zullen we dieper ingaan op het gebruik van de belangrijkste eigenschappen van CSS Grid.

Zie onze gids voor de beste websitebouwer voor andere opties. En zorg ervoor dat u controleert of uw webhosting werkt voor de behoeften van uw site.

• Bekijk de code voor deze tutorial

Wat is CSS Grid?

CSS Grid is een extreem krachtig hulpmiddel voor het opmaken van elementen. Het introduceert een ongekende flexibiliteit in lay-out, met alleen pure CSS en zonder absoluut positioneringselementen (een techniek die tot veel problemen kan leiden). CSS Grid stelt ons in staat om uiterst diverse en apparaatspecifieke lay-outs te realiseren met exact dezelfde HTML-opmaak.

We hoeven niet langer te vertrouwen op hacks, absolute positionering of JavaScript DOM-manipulatie om dynamische, vormveranderende lay-outs te realiseren. CSS Grid geeft ontwerpers een leeg canvas om elke gewenste lay-out te maken zonder zich zorgen te hoeven maken over hoe ze dit moeten bereiken, waardoor een nieuw tijdperk van webontwerp en -ontwikkeling wordt ingeluid met vrijheid van de CSS-beperkingen en tijdelijke oplossingen uit het verleden.

Hoe het raster te definiëren

Om een ​​raster binnen een container te maken, moet het de CSS-eigenschap krijgen display: raster. Het aantal kolommen en rijen wordt bepaald door het aantal door spaties gescheiden formaten waaraan is toegewezen grid-template-kolommen en grid-template-rijen.

Maten kunnen elke geldige CSS-eenheid zijn, zoals px of vw, of de auto trefwoord waarmee kolommen of rijen over de beschikbare ruimte kunnen worden uitgerekt. Bijvoorbeeld, grid-template-kolommen: 10px auto leidt naar een 10px-kolom gevolgd door een tweede kolom die alle beschikbare ruimte vult.

Grid gebruikt ook een ‘fractionele’ eenheid vr waardoor de resterende ruimte wordt verdeeld over kolommen of rijen op basis van de verhoudingen van deze eenheden. grid-template-rijen: 1fr 2fr maakt twee dynamische rijen met de tweede twee keer zo groot als de eerste, while grid-template-kolommen: 1fr 1fr 1fr 1fr definieert vier kolommen van gelijke grootte. Dit laatste kan worden vereenvoudigd met de nieuwe herhaling() functie aan grid-template-kolommen: herhaal (4, 1fr).

Een raster kan daarom worden gemaakt in een container met klassenraster met vier even grote, dynamische kolommen en vier rijen van 75 px hoog (zoals hierboven weergegeven) met behulp van:

.grid {display: grid; grid-template-kolommen: herhaal (4, 1fr); grid-template-rijen: herhaal (4, 75px); }

Complexe rasters met cellen van ongelijke grootte kunnen worden gemaakt door de verschillende eerder genoemde eenheden te combineren. We kunnen ook de minmax () functie om de minimale en maximale grootte van dynamische kolommen en rijen te definiëren. Vandaar, grid-template-rijen: 40px 2fr herhalen (2, minmax (75px, 1fr)) leidt tot vier rijen met de eerste 40 px hoog, de andere drie gespannen over de resterende ruimte in een verhouding van 2: 1: 1, en de laatste twee met een minimumhoogte van 75 px, waarmee de minimumhoogte van de tweede rij wordt ingesteld op 150 px.

Zodra een raster is gemaakt, worden rasterlijnen, weergegeven door stippellijnen in de afbeeldingen, automatisch genummerd vanaf de bovenkant voor rijen of vanaf links voor kolommen. De regels krijgen ook een tweede, negatief getal ten opzichte van hun index, van onderen voor rijen of van rechts voor kolommen.

De eerste verticale stippellijn aan de linkerkant in de rasters hierboven is bijvoorbeeld 1 en -5, en de derde regel is 3 en -2. Deze nummers kunnen worden gebruikt als de grenslijnen van items die in het raster zijn geplaatst. De rasterlijnen kunnen ook een naam krijgen door een string tussen vierkante haken in de eigenschapdeclaraties toe te voegen, bijv. grid-template-rijen: [1e] 1fr [tweede lijn] 1fr [laatste].

Net als bij Flexbox, kan de horizontale en verticale positie van items die in het raster zijn geplaatst, worden beheerd door middel van een instelling rechtvaardigen-items en align-items respectievelijk naar begin, centrum, einde of uitrekken.

Hetzelfde geldt voor rasterkolom- en rijposities binnen een grotere container met rechtvaardigen-inhoud en align-content respectievelijk. Geldige opties voor deze eigenschappen zijn ook ruimte tussen, waar extra ruimte is verdeeld tussen kolommen / rijen, evenals ruimte rond en ruimte gelijkmatig waar de ruimte gelijkmatig is verdeeld over kolommen / rijen met dezelfde of de helft van de hoeveelheid ruimte aan de uiteinden respectievelijk. We kunnen ook definiëren align-content en rechtvaardigen-inhoud (in die volgorde) met plaats-inhoud, en align-items en rechtvaardigen-items gebruik makend van plaats-items.

Items positioneren met regelnummers

Om een ​​item in het raster te plaatsen, kunnen we zijn grid-column-start en grid-column-end eigenschappen naar de verticale regelnummers waartussen het item moet worden uitgerekt. Voor rijen zijn de eigenschappen raster-rij-start en grid-row-end - en natuurlijk verwijzen de cijfers naar de horizontale lijnen.

We kunnen ook gebruik maken van de steno grid-kolom en raster-rij, door ze alleen in te stellen op de startrasterlijn, waardoor het item automatisch alleen naar de volgende rasterlijn wordt uitgerekt. Zoals in de afbeelding hierboven, met behulp van deze methoden, item 1 kan worden geplaatst tussen verticale lijnen 2 en 4 en horizontale lijnen 3 en -1 (laatste regel of eerste van onderen), en item2 van verticale lijn 3 en horizontale lijn 1 naar de volgende rasterlijnen met behulp van:

# item1 {grid-column-start: 2; grid-column-end: 4; raster-rij-start: 3; grid-row-end: -1; } # item2 {rasterkolom: 3; grid-rij: 1; }

Om verder te vereenvoudigen, de aangiften grid-column-start: 2 en grid-column-end: 4 kunnen samen worden gecombineerd als rasterkolom: 2/4, met hetzelfde van toepassing op rijen die raster-rij.

Het nadeel bij het gebruik van deze plaatsingsmethoden is dat sommige van de verklaringen ietwat verkeerde benamingen zijn. Bijvoorbeeld, grid-column-end: 4 en rasterkolom: 2/4 kan verkeerd worden geïnterpreteerd als respectievelijk ‘plaatsing van het einditem in kolom 4’ en ’item plaatsen in de kolommen 2, 3 en 4’. Dit is natuurlijk niet het geval, aangezien de cijfers de rasterlijnen vertegenwoordigen in plaats van kolommen. Om deze mogelijke valkuil te vermijden, kunnen we het startrasterregelnummer en het aantal kolommen of rijen dat het item moet overspannen, aangeven met het trefwoord span.

Met behulp van deze methoden kunnen we herpositioneren item 1 tussen horizontale lijnen 2 en 4 en verticale lijnen 1 en 2, en item2 beginnend bij verticale lijn 2 en verspreid over drie kolommen en vanaf horizontale lijn 3 verspreid over twee rijen (zoals in de afbeelding hierboven) met behulp van:

# item1 {rasterkolom: 1; grid-rij: 2/4; } # item2 {grid-column: 2 / span 3; grid-rij: 3 / span 2; }

Geloof het of niet, het plaatsen van items kan nog verder worden vereenvoudigd met de eigenschap grid-gebied, wat een afkorting is voor raster-rij-start, grid-column-start, grid-row-end en grid-column-end in die volgorde. Als alleen de eerste twee eigenschappen zijn gedefinieerd, wordt het item automatisch tussen die regels en de volgende geplaatst.

Met deze rastereigenschap kunnen ook regelnummers worden gecombineerd met het trefwoord span. Door deze methoden toe te passen, kunnen we herpositioneren item 1 en item2 als zodanig:

# item1 {grid-area: 2/1 / span 2 / span 3; } # item2 {grid-gebied: 4/4; }

Items positioneren met behulp van gebiedsnamen

Hoewel het gebruik van rasterlijnnummers en de span trefwoord is een geweldige manier om items te positioneren, er is een nog intuïtievere en gemakkelijkere manier om items in het raster te plaatsen. Het omvat het gebruik van de grid-gebied en grid-template-gebieden eigendommen.

Om dit te bereiken, moet elk item dat in het raster wordt geplaatst, eerst een naam krijgen door het in te stellen grid-gebied eigenschap naar een string die vervolgens kan worden opgenomen in de grid's grid-template-gebieden verklaring. Het wordt dan mogelijk om te definiëren grid-template-gebieden met behulp van een visuele 'kaart' waarin rijen tussen aanhalingstekens staan, waarbij de inhoud van elke rastercel wordt weergegeven door een tekenreeks die betrekking heeft op de grid-gebied namen van de items.

Lege cellen worden gesymboliseerd door een punt (.) en spaties betekenen verticale rasterlijnen. De rijen kunnen als volgt op nieuwe lijnen worden geplaatst om een ​​visuele weergave van het raster te bieden:

# item1 {grid-gebied: item1; } # item2 {grid-gebied: item2; } .grid {grid-template-areas: "...." "... item1" "item2 item2 item2 item1" "item2 item2 item2."; }

Hoe u een responsieve lay-out maakt met CSS Grid

CSS Grid kan worden gebruikt met mediaquery's om items op verschillende schermformaten te herstructureren zonder de opmaak te wijzigen. De vorm, grootte en positie van het item kunnen allemaal volledig worden gewijzigd, wat leidt tot een echt responsieve en sterk aangepaste lay-out.

Laten we zeggen dat we een lijst met elementen hebben gegenereerd op basis van deze HTML-opmaak (figuur 1):

div> div> / div> div> / div> div> / div> div> / div> div> / div> div> / div> div> / div> / div>

Met behulp van wat we tot nu toe over Grid hebben geleerd, kunnen we stijlen toepassen voor schermen die breder zijn dan 720px, met behulp van een mediaquery (figuur 2):

@media (min-breedte: 721px) {.header {grid-area: header; } .menu {grid-gebied: menu; } .hero {grid-area: hero; } .main {grid-area: main; } .banner {grid-gebied: banner; } .extra {grid-area: extra; } .image {grid-area: image; } .grid {display: grid; grid-template-kolommen: herhaal (4, 1fr); grid-template-rijen: 40px 2fr herhalen (4, 1fr); grid-template-areas: "header header header header" "hero hero hero hero" "menu main main" "menu main main main" "menu banner banner banner" "menu extra afbeelding afbeelding"; }}

We kunnen de items ook gemakkelijk verplaatsen en vergroten of verkleinen voor grotere schermen die breder zijn dan 1000 px met een andere mediaquery (figuur 3):

@media (min-breedte: 1001px) {.grid {grid-template-areas: "header menu menu menu" "hero hero hero hero" "hero hero hero hero" "main main. image" "main main. extra" " banner banner banner banner "; }}

Dat is niet alles - het aantal rasterkolommen en rijen kan zelfs worden gewijzigd om rekening te houden met bepaalde schermformaten, als dit gewenst is, door opnieuw te definiëren grid-template-kolommen en / of grid-template-rijen binnen de mediaquery's.

Overlappende elementen kunnen ook worden bereikt met CSS Grid. Meerdere items kunnen dezelfde rastercellen bezetten en kunnen elkaar dus overlappen, met behulp van de z-index eigenschappen van de items om de volgorde te bepalen waarin ze worden gestapeld.

We kunnen bijvoorbeeld een semi-transparant element toevoegen met de class-werkbalk in de rastercontainer en dit in de meest rechtse kolom plaatsen zodat het overlapt met alle andere elementen (figuur 4):

.toolbar {grid-column: 4; grid-rij: 1 / -1; ondoorzichtigheid: .85; z-index: 1; }

Het laatste aspect dat we zullen bespreken, is de afstand tussen kolommen en rijen of gaten (figuur 5). Items in het raster kunnen worden gescheiden met de grid-column-gap of grid-row-gap eigenschappen die de grootte van de opening tussen kolommen en rijen bepalen. De verkorte eigenschap grid-gap kan beide instellen.

CSS Grid-fallbacks voor oudere browsers

Door CSS Grid-eigenschappen onder mobiele eigenschappen te plaatsen, zorgt u ervoor dat browsers die Grid nog steeds niet ondersteunen, deze negeren en de mobiele versie weergeven. We kunnen ook een standaard fallback-indeling toevoegen met @ondersteuning, een query die regels toepast op basis van browserondersteuning voor een specifieke CSS-functie. We kunnen dus een fallback-indeling instellen voor schermformaten die breder zijn dan 720px:

@ondersteuning niet (display: grid) {@media (min-breedte: 721px) {.header, .extra {float: left; breedte: 50%; }}}

Als u om de een of andere reden deze fallback nodig hebt om te worden weergegeven voor Internet Explorer 10 en 11, die geen ondersteuning bieden voor Grid of, ironisch genoeg, de @ondersteuning query, kunt u een bekende query gebruiken die alleen stijlen toepast in IE10 en 11:

@media (min-breedte: 721px) en (-ms-hoog contrast: geen), (-ms-hoog contrast: actief) {.header, .extra {float: left; breedte: 50%; }}

Als u IE9 en oudere ondersteuning nodig heeft, laad dan een extra stylesheet in de HTML met de relevante stijlen met behulp van:

! - [if IE]> link rel = "stylesheet" href = "ie.css" />! [endif] ->

CSS Grid-bronnen

Voor meer informatie en tutorials over de CSS Grid Module kunt u de volgende bronnen raadplegen.

MDN-webdocumenten
Zoals altijd is de webdocs-site van Mozilla Developer Network een geweldige plek om mee te beginnen - of om er voortdurend naar terug te keren, afhankelijk van hoe sterk uw geheugen is - voor bronnen voor webontwikkelaars. Met name de CSS Grid-opmaakpagina bevat uitleg voor alle eigenschappen van Grid, evenals interactieve voorbeelden die u zelf kunt uitproberen.

Scrimba interactief: CSS Grid-zelfstudie
Scrimba is een interactief platform voor codecursussen. U kunt de video's pauzeren, de code erin bewerken en de resultaten bekijken voordat u de zelfstudie hervat. Het is een fantastische manier om codering te leren en de gratis 14-delige CSS Grid-cursus van Per Harald Borgen is geweldig voor diegenen die de voorkeur geven aan video-tutorials.

Grid Garden-spel
Een geweldige interactieve manier om te leren coderen is door middel van games. Grid Garden is een online game waarbij je een worteltuin water geeft door CSS Grid-eigenschappen in een editor te typen. Het is erg leuk en verrassend bevredigend, zelfs als je een digitale oogst hebt.

Een site ontwerpen als onderdeel van een team? Uw cloudopslagservice helpt iedereen op dezelfde pagina te blijven.

Dit artikel is oorspronkelijk gepubliceerd in netto-, 's werelds best verkochte tijdschrift voor webontwerpers en -ontwikkelaars. Kopen kwestie 309 of abonneren.