Wanneer u met CSS Grid werkt, is het eerste wat u moet doen het instellen van display: grid op het element dat we willen worden, wordt een rastercontainer. Vervolgens definiëren we het raster expliciet met een combinatie van grid-template-columns, grid-template-rows en grid-template-areas. En vanaf daar is de volgende stap om items in het raster te plaatsen.

Dit is de klassieke benadering die moet worden gebruikt en ik raad het ook aan. Er is echter een andere benadering voor het maken van rasters zonder enige expliciete definitie. We noemen dit de impliciet raster.

“Expliciet, impliciet? Wat is hier in godsnaam aan de hand?"

Vreemde termen, toch? Manuel Matuzovic al heeft een goede uitleg van wat we kunnen met "impliciet" en "expliciet" in CSS Grid, maar laten we direct ingaan op wat de specification zegt:

De grid-template-rows, grid-template-columns en grid-template-areas eigenschappen definiëren een vast aantal tracks die vormen het expliciete raster. Wanneer rasteritems buiten deze grenzen worden geplaatst, genereert de rastercontainer impliciete rastersporen door impliciete rasterlijnen aan het raster toe te voegen. Deze lijnen samen met de expliciete rastervorm het impliciete raster.

Dus, in gewoon Engels, genereert de browser automatisch extra rijen en kolommen voor het geval er elementen buiten het gedefinieerde raster worden geplaatst.

Hoe zit het met automatische plaatsing?

Net als bij het concept van een impliciet raster, automatische plaatsing is de mogelijkheid van de browser om de items automatisch in het raster te plaatsen. We hoeven niet altijd de positie van elk item op te geven.

Aan de hand van verschillende gebruiksscenario's gaan we zien hoe dergelijke functies ons kunnen helpen bij het maken van een complex en dynamisch raster met een paar regels code.

Dynamische zijbalk

Hier hebben we drie verschillende lay-outs, maar we hebben slechts één rasterconfiguratie die voor allemaal werkt.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Slechts één kolom neemt alle vrije ruimte in beslag. Dit is ons "expliciete" raster. Het is zo ingesteld dat het in één rasteritem past in de main rooster container. Dat is alles. Een kolom en een rij:

Maar wat als we zouden besluiten om er nog een element in te laten vallen, zeg an aside (onze dynamische zijbalk). Zoals het momenteel (en expliciet) is gedefinieerd, zal ons raster zich automatisch moeten aanpassen om een ​​plaats voor dat element te vinden. En als we niets anders doen met onze CSS, is dit wat DevTools ons vertelt dat er gebeurt.

We kunnen de verplaatsen <aside> naar een kolom naast de <section>:

aside {
  grid-column-start: 2;
}

En dit is wat DevTools ons nu vertelt:

We plaatsen ons element in de tweede kolom, maar... we hebben geen tweede kolom. Vreemd, toch? We hebben nooit een tweede kolom gedeclareerd op de <main> rastercontainer, maar de browser heeft er een voor ons gemaakt! Dit is het belangrijkste onderdeel van de specificatie waar we naar hebben gekeken:

Wanneer rasteritems buiten deze grenzen worden geplaatst, genereert de rastercontainer impliciete rastersporen door impliciete rasterlijnen aan het raster toe te voegen.

Deze krachtige functie stelt ons in staat om dynamische lay-outs te hebben. Als we alleen de <section> element, alles wat we krijgen is één kolom. Maar als we een . toevoegen <aside> element aan de mix toevoegt, wordt er een extra kolom gemaakt om het te bevatten.

We zouden de kunnen plaatsen <aside> voor de <section> in plaats daarvan als volgt:

aside {
  grid-column-end: -2;
} 

Dit creëert de impliciete kolom aan het begin van het raster, in tegenstelling tot de vorige code die de impliciete kolom aan het einde plaatst.

We kunnen hetzelfde gemakkelijker doen met de grid-auto-flow eigenschap om alle impliciete tracks in te stellen om in een te stromen column richting:

Nu is het niet nodig om te specificeren grid-column-start om de <aside> element rechts van de <section>! In feite zal elk ander rasteritem dat we daar op enig moment ingooien, nu in een kolomrichting stromen, elk in zijn eigen impliciete rastersporen. Perfect voor situaties waar het aantal items in het raster niet van tevoren bekend is!

Dat gezegd hebbende, we hebben nog steeds nodig grid-column-end als we het in een kolom links ervan willen plaatsen omdat anders de <aside> zal de expliciete kolom bezetten die op zijn beurt de duwt <section> buiten het expliciete raster en dwingt het om de impliciete kolom te nemen.

Ik weet het. Dat is een beetje ingewikkeld. Hier is nog een voorbeeld dat we kunnen gebruiken om deze kleine eigenaardigheid beter te begrijpen:

In het eerste voorbeeld hebben we geen plaatsing gespecificeerd. In dit geval zal de browser eerst de <aside> element in de expliciete kolom omdat het eerst in de DOM komt. De <section>, wordt ondertussen automatisch in de rasterkolom geplaatst die de browser automatisch (of impliciet) voor ons maakt.

In het tweede voorbeeld stellen we de <aside> element buiten het expliciete raster:

aside {
  grid-column-end: -2;
}

Nu maakt het niet uit dat <aside> komt eerst in de HTML. Door opnieuw toe te wijzen <aside> ergens anders hebben we de <section> element beschikbaar om de expliciete kolom te nemen.

Afbeeldingsraster

Laten we iets anders proberen met een raster van afbeeldingen waar we een grote afbeelding hebben en een paar miniaturen ernaast (of eronder).

We hebben twee rasterconfiguraties. Maar Raad eens? Ik definieer helemaal geen raster! Het enige wat ik doe is dit:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Het is verrassend dat we maar één regel code nodig hebben om zoiets als dit voor elkaar te krijgen, dus laten we ontleden wat er aan de hand is en je zult zien dat het gemakkelijker is dan je misschien denkt. Allereerst, grid-area is een steno-eigenschap die de volgende eigenschappen combineert in een enkele declaratie:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Wacht! is niet grid-area de eigenschap die we gebruiken om te definiëren benoemde gebieden in plaats van waar elementen beginnen en eindigen op het raster?

Ja, maar het doet ook meer. We zouden nog veel meer kunnen schrijven over grid-area, maar in dit specifieke geval:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

We kunnen hetzelfde zien als we DevTools openen om de stenoversie uit te breiden:

Dit betekent dat het eerste afbeeldingselement in het raster moet overspannen drie kolommen en drie rijen. Maar aangezien we geen kolommen of rijen hebben gedefinieerd, doet de browser het voor ons.

We hebben in wezen de eerste afbeelding in de HTML geplaatst om een ​​3⨉3-raster in te nemen. Dat betekent dat alle andere afbeeldingen automatisch in diezelfde drie kolommen worden geplaatst zonder dat u iets nieuws hoeft op te geven.

Samenvattend hebben we de browser verteld dat de eerste afbeelding de ruimte van drie kolommen en drie rijen nodig heeft die we nooit expliciet hebben gedefinieerd bij het instellen van de rastercontainer. De browser heeft die kolommen en rijen voor ons ingesteld. Als resultaat, de resterende afbeeldingen in de HTML vloeien precies op hun plaats met dezelfde drie kolommen en rijen. En aangezien de eerste afbeelding alle drie de kolommen van de eerste rij in beslag neemt, vloeien de overige afbeeldingen over in extra rijen die elk drie kolommen bevatten, waarbij elke afbeelding een enkele kolom in beslag neemt.

Dit alles vanuit één regel CSS! Dat is de kracht van een "impliciet" raster" en automatische plaatsing.

Voor de tweede rasterconfiguratie in die demo heb ik alleen de automatische stroomrichting gewijzigd met grid-auto-flow: column op dezelfde manier als we eerder deden bij het plaatsen van een <aside> element naast a <section>. Dit dwingt de browser om een vierde kolom die het kan gebruiken om de resterende afbeeldingen te plaatsen. En aangezien we drie rijen hebben, worden de overige afbeeldingen in dezelfde verticale kolom geplaatst.

We moeten een paar eigenschappen aan de afbeeldingen toevoegen om ervoor te zorgen dat ze mooi in het raster passen zonder enige overloop:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

En natuurlijk kunnen we het raster eenvoudig bijwerken om meer afbeeldingen te overwegen door één waarde aan te passen. Dat zou het zijn 3 in de stijlen voor de grote afbeelding. We hebben dit:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Maar we zouden een vierde kolom kunnen toevoegen door deze simpelweg te veranderen in 4 in plaats daarvan:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Nog beter: laten we dat instellen als een aangepaste eigenschap om het nog gemakkelijker te maken om dingen bij te werken.

Dynamische lay-outs

De eerste use case met de zijbalk was onze eerste dynamische lay-out. Nu gaan we complexere lay-outs aanpakken waarbij het aantal elementen de rasterconfiguratie dicteert.

In dit voorbeeld kunnen we één tot vier elementen hebben waarbij het raster zich aanpast op een manier die mooi past bij het aantal elementen zonder lastige openingen of ontbrekende spaties.

Als we één element hebben, doen we niets. Het element wordt uitgerekt om de enige rij en kolom te vullen die automatisch door het raster worden gemaakt.

Bit wanneer we het tweede element toevoegen, maken we een andere (impliciete) kolom met behulp van grid-column-start: 2.

Wanneer we een derde element toevoegen, moet het de breedte van twee kolommen innemen - daarom gebruikten we grid-column-start: span 2, maar alleen als het de :last-child want als (en wanneer) we een vierde element toevoegen, mag dat maar één kolom in beslag nemen.

Als we dat optellen, hebben we vier rasterconfiguraties slechts twee verklaringen en de magie van het impliciete raster:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Laten we een andere proberen:

We doen niets voor het eerste en tweede geval waarin we slechts een of twee elementen hebben. Wanneer we echter een derde element toevoegen, vertellen we de browser dat - zolang het de :last-child - het moet twee kolommen overspannen. Wanneer we een vierde element toevoegen, vertellen we de browser dat element in de tweede kolom moet worden geplaatst.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Begin je de truc te snappen? We geven de browser specifieke instructies op basis van het aantal elementen (met behulp van :nth-child) en soms kan één instructie de lay-out volledig veranderen.

Opgemerkt moet worden dat de maatvoering niet hetzelfde zal zijn wanneer we met verschillende inhoud werken:

Omdat we geen maten voor onze artikelen hebben gedefinieerd, past de browser ze automatisch voor ons aan op basis van hun inhoud en kunnen we eindigen met een andere maat dan we net hebben gezien. Om dit te overwinnen, moeten we uitdrukkelijk specificeer dat alle kolommen en rijen even groot zijn:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hé, we hebben nog niet met die eigendommen gespeeld! grid-auto-rows en grid-auto-columns stel de grootte van respectievelijk impliciete rijen en kolommen in een rastercontainer in. Of, zoals de spec legt het uit:

De grid-auto-columns en grid-auto-rows eigenschappen specificeren de grootte van tracks waaraan geen grootte is toegewezen door grid-template-rows or grid-template-columns.

Hier is nog een voorbeeld waarbij we tot zes elementen kunnen gaan. Deze keer laat ik je de code ontleden. Maak je geen zorgen, de selectors zien er misschien ingewikkeld uit, maar de logica is vrij eenvoudig.

Zelfs met zes elementen hadden we maar twee declaraties nodig. Stelt u zich eens alle complexe en dynamische lay-outs voor die we kunnen bereiken met een paar regels code!

Wat is daar mee aan de hand? grid-auto-rows en waarom zijn er drie waarden nodig? Definiëren we drie rijen?

Nee, we definiëren geen drie rijen. Maar wij zijn het definiëren van drie waarden als een patroon voor onze impliciete rijen. De logica is als volgt:

• Als we één rij hebben, krijgt deze de grootte met de eerste waarde.
• Als we twee rijen hebben, krijgt de eerste de eerste waarde en de tweede de tweede waarde.
• Als we drie rijen hebben, worden de drie waarden gebruikt.
• Als we vier rijen hebben (en hier komt het interessante deel), gebruiken we de drie waarden voor de eerste drie rijen en hergebruiken we de eerste waarde opnieuw voor de vierde rij. Daarom is het een soort patroon dat we herhalen om alle impliciete rijen op maat te maken.
• Als we 100 rijen hebben, hebben ze een formaat van drie bij drie 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, Etc.

Anders grid-template-rows die het aantal rijen en hun grootte definieert, grid-auto-rows alleen rijen met maten die onderweg kunnen worden gemaakt.

Als we teruggaan naar ons voorbeeld, is de logica om gelijke grootte te hebben wanneer twee rijen worden gemaakt (we gebruiken de 2fr 2fr), maar als er een derde rij wordt gemaakt, maken we deze een beetje kleiner.

Rasterpatronen

Voor deze laatste gaan we het hebben over patronen. U hebt waarschijnlijk die twee kolomlay-outs gezien waarbij de ene kolom breder is dan de andere, en elke rij wisselt de plaatsing van die kolommen af.

Deze soort lay-out kan moeilijk zijn om te maken zonder precies te weten met hoeveel inhoud we te maken hebben, maar de impliciete automatische plaatsingskracht van CSS Grid maakt het een relatieve makkie.

Neem een ​​kijkje in de code. Het ziet er misschien ingewikkeld uit, maar laten we het opsplitsen, want het blijkt vrij eenvoudig te zijn.

Het eerste dat u moet doen, is het patroon identificeren. Stel jezelf de vraag: "Na hoeveel elementen moet het patroon worden herhaald?" In dit geval is het na elke vier elementen. Laten we dus eens kijken naar het gebruik van slechts vier elementen voor nu:

Laten we nu het raster definiëren en het algemene patroon instellen met behulp van de :nth-child selector voor het afwisselen tussen elementen:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

We zeiden dat ons patroon elke vier elementen herhaalt, dus we zullen logischerwijs gebruiken 4n + x WAAR x varieert van 1 tot 4. Het is iets gemakkelijker om het patroon op deze manier uit te leggen:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Ideaal toch? We hebben vier elementen en herhalen het patroon op het vijfde element, het negende element enzovoort.

Die :nth-child selectors kunnen lastig zijn! Chris heeft een super behulpzame uitleg hoe het allemaal werkt, waaronder recepten voor het maken van verschillende patronen.

Nu configureren we elk element zo dat:

1. Het eerste element moet twee kolommen bevatten en beginnen bij kolom één (grid-column: 1/span 2).
2. Het tweede element wordt in de derde kolom geplaatst (grid-column-start: 3).
3. Het derde element wordt in de eerste kolom geplaatst: (grid-column-start: 1).
4. Het vierde element heeft twee kolommen en begint bij de tweede kolom: (grid-column: 2/span 2).

Hier is dat in CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

We kunnen hier stoppen en klaar zijn... maar het kan beter! In het bijzonder kunnen we enkele verklaringen verwijderen en vertrouwen op de automatische plaatsingsbevoegdheden van grid om het werk voor ons te doen. Dit is het lastigste deel om te grokken en vereist veel oefening om te kunnen identificeren wat kan worden verwijderd.

Het eerste wat we kunnen doen is updaten grid-column: 1 /span 2 en gebruik alleen grid-column: span 2 omdat de browser standaard het eerste item in de eerste kolom plaatst. We kunnen dit ook verwijderen:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Door het eerste, tweede en vierde item te plaatsen, plaatst het raster automatisch het derde item op de juiste plaats. Dat betekent dat we dit overhouden:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Maar kom op, we kunnen beter wandelen! We kunnen dit ook verwijderen:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Waarom? Als we het vierde element in de tweede kolom plaatsen terwijl het twee volledige kolommen in beslag neemt, dwingen we het raster om een ​​derde impliciete kolom te maken, waardoor we in totaal drie kolommen krijgen zonder het expliciet te vertellen. Het vierde element kan niet naar de eerste rij gaan, omdat het eerste item ook twee kolommen in beslag neemt, dus het stroomt naar de volgende rij. Deze configuratie laat ons achter met een lege kolom in de eerste rij en een lege kolom in de tweede rij.

Ik denk dat je het einde van het verhaal kent. De browser plaatst automatisch het tweede en derde item op die lege plekken. Dus onze code wordt nog eenvoudiger:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Het enige dat nodig is, zijn vijf verklaringen om een ​​heel cool en zeer flexibel patroon te creëren. Het optimalisatiegedeelte is misschien lastig, maar je raakt eraan gewend en leert wat trucjes door te oefenen.

Waarom niet gebruiken grid-template-columns om expliciete kolommen te definiëren omdat we het aantal kolommen kennen?

We kunnen dat doen! Hier is de code ervoor:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Zoals je kunt zien, is de code absoluut intuïtiever. We definiëren drie expliciete rasterkolommen en we vertellen de browser dat het eerste en vierde element twee kolommen moeten hebben. Ik raad deze aanpak ten zeerste aan! Maar het doel van dit artikel is om nieuwe ideeën en trucs te verkennen die we krijgen van de impliciete en automatische plaatsingskracht van CSS Grid.

De expliciete benadering is meer rechttoe rechtaan, terwijl een impliciet raster vereist dat je - excuseer de woordspeling - de gaten opvult waar CSS achter de schermen extra werk doet. Uiteindelijk geloof ik dat een goed begrip van impliciete rasters je zal helpen het CSS Grid-algoritme beter te begrijpen. We zijn hier tenslotte niet om te bestuderen wat voor de hand ligt - we zijn hier om wilde gebieden te verkennen!

Laten we een ander patroon proberen, deze keer een beetje sneller:

Ons patroon herhaalt zich elke zes elementen. Het derde en vierde element moeten elk twee volledige rijen innemen. Als we het derde en het vierde element plaatsen, lijkt het erop dat we de anderen niet hoeven aan te raken, dus laten we het volgende proberen:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hm, niet goed. We moeten het tweede element in de eerste kolom plaatsen. Anders plaatst het raster het automatisch in de tweede kolom.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Beter, maar er is nog meer werk. We moeten het derde element naar boven verschuiven. Het is verleidelijk om het op deze manier op de eerste rij te plaatsen:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Maar dit werkt niet omdat het alle 6n + 3 elementen om in hetzelfde gebied te worden geplaatst, wat een warrige lay-out oplevert. De echte oplossing is om de oorspronkelijke definitie van het derde element te behouden en toe te voegen grid-auto-flow: dense om de gaten op te vullen. Van MDN:

[Het] "dichte" verpakkingsalgoritme probeert te vullen in gaten eerder in het raster, als er later kleinere items opduiken. Dit kan ertoe leiden dat items niet in orde lijken, terwijl dit de gaten zou opvullen die zijn achtergelaten door grotere items. Als het wordt weggelaten, wordt een "sparse" algoritme gebruikt, waarbij het plaatsingsalgoritme alleen maar "vooruit" in het raster beweegt bij het plaatsen van items, en nooit teruggaat om gaten te vullen. Dit zorgt ervoor dat alle automatisch geplaatste items "in volgorde" verschijnen, zelfs als dit gaten laat die door latere items zouden kunnen worden opgevuld.

Ik weet dat deze eigenschap niet erg intuïtief is, maar vergeet het nooit als je een plaatsingsprobleem hebt. Voordat u tevergeefs verschillende configuraties probeert, moet u het toevoegen, omdat het uw lay-out zonder extra moeite kan repareren.

Waarom deze eigenschap niet altijd standaard toevoegen?

Ik raad het niet aan, omdat we dat gedrag in sommige gevallen niet willen. Merk op hoe de uitleg van de MDN daar vermeldt dat het ervoor zorgt dat items "buiten de orde" stromen om gaten te vullen die zijn achtergelaten door grotere items. Visuele volgorde is meestal net zo belangrijk als de bronvolgorde, vooral als het gaat om toegankelijke interfaces, en grid-auto-flow: dense kan soms een mismatch veroorzaken tussen de visuele en bronvolgorde.

Onze uiteindelijke code is dan:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Nog een? Laten we gaan!

Voor deze zal ik niet te veel praten en je in plaats daarvan een illustratie laten zien van de code die ik heb gebruikt. Probeer te zien of je snapt hoe ik die code heb bereikt:

De items in het zwart worden impliciet in het raster geplaatst. Opgemerkt moet worden dat we dezelfde lay-out op meer manieren kunnen krijgen dan hoe ik daar kwam. Kun jij die ook bedenken? Hoe zit het met het gebruik? grid-template-columns? Deel uw werken in het commentaargedeelte.

Ik ga je achterlaten met een laatste patroon:

Ik doe heb een oplossing voor deze, maar het is jouw beurt om te oefenen. Neem alles wat we hebben geleerd en probeer dit zelf te coderen en vergelijk het dan met mijn oplossing. Maak je geen zorgen als je eindigt met iets uitgebreids - het belangrijkste is om een ​​werkende oplossing te vinden.

Meer willen?

Voordat we eindigen, wil ik een paar Stack Overflow-vragen delen met betrekking tot CSS Grid, waar ik insprong met antwoorden die veel van de technieken gebruiken die we hier samen hebben behandeld. Het is een goede lijst die laat zien hoeveel echte use-cases en real-world situaties zich voordoen waar deze dingen van pas komen:

Afsluiten

CSS Grid bestaat al jaren, maar er zijn nog steeds veel weinig bekende en gebruikte trucs die niet veel worden besproken. Het impliciete raster en automatische plaatsingsfuncties zijn er twee van!

En ja, dit kan een uitdaging worden! Het heeft me veel tijd gekost om de logica achter impliciete rasters te doorgronden en ik worstel nog steeds met automatische plaatsing. Als je meer tijd wilt besteden aan het wikkelen van expliciete en impliciete rasters, zijn hier een paar aanvullende uitleg en voorbeelden die het bekijken waard zijn:

Op dezelfde manier wil je misschien lezen over: grid-auto-columns in de CSS-Tricks Almanac omdat Mojtaba Seyedi tot in de kleinste details ingaat en ongelooflijk nuttige beelden bevat om het gedrag te helpen verklaren.

Zoals ik al zei toen we begonnen, zijn de methoden die we hier hebben behandeld niet bedoeld om de gebruikelijke manieren te vervangen die je al kent voor het bouwen van rasters. Ik ben gewoon verschillende manieren aan het onderzoeken die in sommige gevallen nuttig kunnen zijn.