Een beginnershandleiding voor CSS-raster

Foto door Greg Rakozy op Unsplash

Ik hoorde voor het eerst over CSS Grid tegen het einde van 2016. Ik zat op een van mijn eerste Tech Ladies®-vergaderingen en een deelnemer vertelde hoe geweldig het was. Anderhalf jaar later snel vooruit en ik ga eindelijk dieper in Grid graven. Als een toegewijde Flexbox-gebruiker kan ik al vertellen hoe dit een game-wisselaar wordt.

De grootste vraag die ik had toen ik begon te leren over CSS Grid was: hoe verschilt Grid van Flexbox? En ik ontdekte dat Grid in het algemeen alles kan doen wat Flexbox kan doen. Sommige mensen zijn van mening dat Grid is voor multidimensionale lay-outs, terwijl Flexbox moet worden gebruikt voor eendimensionale lay-outs. Maar Raster is ook geweldig in eendimensionale lay-outs - vooral als je later terugkomt en besluit dat je die lay-out multidimensionaal wilt maken.

CSS-raster instellen

Grid is uiterst eenvoudig in te stellen - er zijn slechts twee regels CSS nodig.

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

.wrapper {
    weergave: rooster;
    grid-template-columns: 10rem 10rem 10rem;
}

En voila! Je hebt een rooster. Serieus, dat is alles wat je nodig hebt. Het is best goed.

U zult merken dat, anders dan bij het instellen van Flexbox om weer te geven: flex, display: grid toevoegen aan uw wrapper niet meteen een verschil maakt. Dit komt omdat u niet expliciet definieert hoeveel kolommen u wilt dat uw raster bevat. Je doet dit met raster-sjabloon-kolommen zoals ik hierboven heb gedaan. In dit voorbeeld stel ik drie kolommen in met elk een breedte van 10 rem.

Basic CSS Grid

U kunt elke gewenste waarde gebruiken bij het instellen van raster-sjabloon-kolommen, maar ik stel voor om uit de percentages te blijven, tenzij u probeert 100% toe te voegen. Dit komt omdat je rekening zult moeten houden met je hoeveelheid rasterafstand (waar we zo een beetje op in zullen gaan), en dat kan een beetje lastig worden.

Expliciete versus impliciete tracks

Voordat ik het heb over expliciete en impliciete tracks, laten we het eerst hebben over wat tracks zijn. Tracks zijn hoe kolommen en rijen worden genummerd. In plaats van de afzonderlijke kolommen en rijen afzonderlijk te tellen, tel je ze in CSS Grid op de track-lijnen. Hier is het raster waarmee we zijn begonnen - ik heb alle rijen en kolommen van het spoor genummerd om het een beetje gemakkelijker te maken te zien.

CSS-raster met genummerde kolomlijnen en rijlijnen

Je kunt zien dat we eigenlijk vier kolomlijnen en drie rijlijnen hebben. Dit helpt bij het plaatsen van uw items op het rooster.

Een korte kanttekening: als u de Developer-versie van Firefox (de bètaversie van de reguliere Firefox) gebruikt, heeft deze in feite een aantal geweldige hulpprogramma's voor het bekijken van de kolom- en rijtracknummers. Als u uw wrapper-element inspecteert en vervolgens naar het lay-outtabblad gaat, vink dan het vakje voor uw wrapper aan en nu ziet uw raster er als volgt uit! Ik hoop echt dat Chrome in de toekomst een dergelijke inspectiefunctie toevoegt. Het is uiterst nuttig.

Firefox Developer Edition Inspector Tools

Laten we teruggaan naar het verschil tussen expliciete en impliciete tracks. Als we onze code van hierboven gebruiken, ziet u dat we alleen onze kolommen hebben ingesteld. In dit geval hebben we onze kolommen expliciet ingesteld op drie, maar we hebben impliciet onze rijen ingesteld. We hebben zes items, maar uiteraard kunnen al deze items niet in drie kolommen passen, dus een tweede rij wordt impliciet ingesteld.

Dit is een beetje verwarrend, dus ik raad zeker aan om alleen met CSS Grid te rotzooien om het verschil tussen expliciete en impliciete tracks te zien.

Grid-Gap toevoegen

Denk aan rasterkloof zoals marge, behalve dat het alleen tussen items wordt toegevoegd en niet aan de buitenkant van het raster. Ik ben zoveel gevallen tegengekomen dat ik marge op items in een Flexbox-raster toevoeg om alleen naar de verpakking van het raster te gaan en dezelfde hoeveelheid marge in te stellen, maar negatief, om de marge te compenseren die buiten het raster wordt ingesteld. Gelukkig met CSS Grid, daar hoef je niet mee om te gaan.

Laten we ons voorbeeld CSS hierboven nemen en wat grid-gap toevoegen.

.wrapper {
  weergave: rooster;
  grid-template-columns: 10rem 10rem 10rem;
  grid-gap: 1rem;
}
CSS Grid met 1rem grid-gap

Ik heb de steno-eigenschap grid-gap gebruikt, maar u kunt een expliciete waarde voor de kolommen en rijen definiëren met behulp van grid-column-gap en grid-row-gap.

* Opmerking: Chrome 66 zal grid-gap veranderen in gap en grid-column-gap / grid-row-gap in column-gap / row-gap.

De functie Repeat ()

Het is vrij eenvoudig om te definiëren hoe breed u elk van uw kolommen wilt hebben bij het gebruik van rastersjabloonkolommen met drie kolommen die allemaal dezelfde breedte hebben. Maar dat is veel typen als je meer kolommen wilt dan dat. Dit is waar de functie repeat () van pas komt.

Hier is ons voorbeeld dat we hebben gebruikt met de functie repeat () toegevoegd.

.wrapper {
  weergave: rooster;
  rooster-sjabloon-kolommen: herhalen (3, 10rem);
  grid-gap: 1rem;
}

Zoals je kunt zien in mijn CSS, stel ik drie kolommen in van elk 10 breed. Dit raster ziet er precies hetzelfde uit als het raster afgebeeld in ons raster-gap-voorbeeld. Door de functie repeat () te gebruiken, maken we het schrijven van dingen een beetje eenvoudiger en gemakkelijker om te lezen voor als u veel kolommen wilt instellen.

Fractionele eenheden

Fractionele eenheden, of fr, zijn een nieuwe CSS-lengte-eenheid geïntroduceerd met CSS Grid en een die ik mezelf altijd kan zien gebruiken. Stel dat we drie kolommen van dezelfde breedte willen. In plaats van breedte: calc (100% / 3) op de items in te stellen, kunnen we fractionele eenheden gebruiken. Beschouw fractionele eenheden als 'vrije ruimte'.

Laten we doorgaan met ons voorbeeld dat we hebben gebruikt.

.wrapper {
  weergave: rooster;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

Je zult merken dat het enige dat ik heb gewijzigd, kolommen met rastersjablonen zijn. Ik vertel nu aan de browser dat ik drie kolommen wil, en dat ik wil dat elk van die kolommen één fractionele eenheid of één "vrije ruimte" in beslag neemt. Dit werkt zeer vergelijkbaar met Flexbox's eigenschap flex-grow.

CSS-raster met fractionele eenheden

De reden dat elk item een ​​beetje breder is dan in ons vorige voorbeeld, is omdat ze nu zoveel ruimte in beslag nemen als ze kunnen, terwijl ze nog steeds in drie kolommen passen. In dit geval heb ik geen harde breedte ingesteld, dus nemen ze de volledige breedte van mijn scherm in beslag. Ik weet dat dit een beetje moeilijk te zien is zonder het op je eigen scherm te hebben, dus ik raad zeker aan dit zelf te doen.

U hoeft ook niet al uw kolommen in te stellen op 1fr. Hieronder is een voorbeeld waarbij ik mijn eerste en derde kolom heb ingesteld op 10rems terwijl mijn middelste kolom 1fr is. Je kunt ook je kolommen instellen op 2fr, 3fr, enzovoort, en de items van die kolom nemen 2x, 3x (enzovoort) de hoeveelheid ruimte in beslag.

CSS-raster met alleen de middelste kolom ingesteld op 1fr

Grootte van afzonderlijke rasteritems aanpassen

Laten we het hebben over de grootte van onze afzonderlijke rasteritems. U kunt geen harde breedte op afzonderlijke items plaatsen, omdat we de breedte expliciet instellen met raster-sjabloon-kolommen. Maar wat als u wilt dat item vijf in ons voorbeeld de breedte van meerdere kolommen is? We kunnen dit doen met behulp van raster-kolom en span.

.wrapper {
  weergave: rooster;
  rooster-sjabloon-kolommen: herhalen (3, 10rem);
  grid-gap: 1rem;
}
.item5 {
  grid-column: span 2;
}

U ziet hierboven dat we raster-kolom van item vijf instellen op een overspanning van twee, waardoor item vijf een breedte van twee kolommen kan overspannen.

CSS-raster met overspanning op een afzonderlijk item

Maar wat als u wilt dat item vijf drie kolommen beslaat? Dit is wat er zal gebeuren.

CSS-raster over item vijf in drie kolommen

Omdat item vijf natuurlijk begint bij de tweede kolom, hebben we niet genoeg ruimte om de totale breedte te overspannen die we hebben ingesteld. Dus het gaat naar de volgende rij. U kunt hetzelfde concept van rasterkolom tot rasterrij toepassen als u wilt dat een item meerdere rijen beslaat.

Er is een vrij eenvoudige oplossing voor het repareren van de lege ruimte die overblijft van item vijf dat naar beneden beweegt. Het kan worden gebruikt of u een item instelt om een ​​rij of een kolom te overbruggen - grid-auto-flow: dicht.

.wrapper {
  weergave: rooster;
  rooster-sjabloon-kolommen: herhalen (3, 10rem);
  grid-gap: 1rem;
  grid-auto-flow: dicht;
}
.item5 {
  rooster-kolom: span 3;
}

In CSS Grid controleert het raster automatisch of items passen. Zoals ik al zei, als een item niet past, wordt het afgebroken naar de volgende regel. Raster-automatische stroom: dicht vertelt het raster om die lege ruimtes in te vullen met elk item dat past. In dit geval heb ik een zevende rasteritem toegevoegd, zodat het raster dat en het zesde item automatisch naar de lege plekken verplaatst.

CSS Grid zal altijd lay-outitems maken die eerst naar een specifieke plek moeten gaan - in dit geval item vijf, omdat deze drie kolommen beslaat. Als u vervolgens grid-auto-flow: dichte set hebt, zoekt het naar andere items die in de lege plekken op het raster passen.

CSS Grid met grid-auto-flow: dicht

De eigenschap grid-flow automatisch bepaalt zelf in welke richting u nog een rij of kolom moet toevoegen nadat u uw items al hebt gedefinieerd. Rij is de standaard. Ik zie hier geen groot gebruik van naast het gebruik van grid-auto-flow: dicht.

Rasteritems plaatsen

In ons voorbeeld met het rangschikken van individuele rasteritems, zetten we oorspronkelijk item vijf op rasterkolom: span 2, waardoor item vijf zich over twee kolommen kon uitstrekken. Eigenlijk is raster-kolom steno voor raster-kolom-begin en raster-kolom-einde. Hetzelfde geldt ook voor de rasterrij.

Technisch gezien hebben we item vijf dus ingesteld op grid-column-start: span 2 en grid-column-end: auto. In wezen vertelden we het rooster om punt vijf te beginnen waar het natuurlijk zou gaan, maar twee keer zo groot te worden.

Laten we opnieuw werken met item vijf, en ik ga u dit laten zien met behulp van de Inspector Tools van Firefox Developer Edition zodat u gemakkelijker kunt zien waar trackregel vijf op staat. Ik heb ook nog een paar rasteritems toegevoegd.

.wrapper {
  weergave: rooster;
  rooster-sjabloon-kolommen: herhalen (3, 10rem);
  grid-gap: 1rem;
}
.item5 {
  grid-column-start: 1;
  rooster-kolom-einde: 3;
}

CSS Grid zal alle items vóór onze vijfde opmaken, stoppen en dan kijken waar we item vijf zijn begonnen en eindigen, en plaatsen waar we het hebben opgedragen. De afkorting hiervan zou de rasterkolom zijn: 1/3 waarbij 1 onze beginwaarde is en 3 onze eindwaarde.

CSS Grid met behulp van grid-column-start en grid-column-end

U kunt een individueel rasteritem ook vertellen hoe breed u wilt dat het overspant en waar u wilt dat het eindigt. Ik gebruik de steno-raster-kolomeigenschap in dit voorbeeld, dus ik zeg item vijf dat het twee kolommen overspant die eindigen op spoorlijn vier.

.wrapper {
  weergave: rooster;
  rooster-sjabloon-kolommen: herhalen (3, 10rem);
  grid-gap: 1rem;
}
.item5 {
  grid-kolom: span 2/4;
}
CSS-raster met steno-kolom verkorte eigenschap

Als u wilt dat uw item de volledige breedte van het raster overspant, maar niet weet hoe breed uw raster is, kunt u rasterkolom instellen: 1 / -1. Kortom, die -1-waarde geeft aan dat uw item helemaal naar het laatste nummer moet gaan. Als u dit met rijen doet, zult u merken dat uw item mogelijk niet helemaal naar de onderkant van uw raster gaat. Het gaat alleen naar de onderkant van uw expliciete rijen, niet uw impliciete rijen.

Middelen

Hier zijn enkele bronnen die ik ten zeerste aanbeveel voor een diepere duik in CSS Grid!

  • Wes Bos CSS Grid Tutorial - het is helemaal gratis en is waar ik heb geleerd over grid. Ik hou van zijn stijl van lesgeven!
  • CSS Tricks ’Complete gids voor CSS Grid - dit heeft een aantal geweldige cheatsheets voor als je vastzit aan een bepaald aspect van Grid.
  • CSS Grid Garden - een leuke manier om te oefenen wat je hebt geleerd over CSS Grid. Ik raad aan een tutorial te doen voordat je dit probeert, omdat het soms een beetje verwarrend wordt.

Bedankt voor het lezen van mijn tutorial over CSS Grid! Bekijk mijn andere artikelen zoals How To Answer the Dreaded ‘Tell Me About Yourself’ Interview Question, ‘Why You should Hire A Bootcamp Grad of my story of how I developer.

En volg me ook op Twitter voor veel tweets over technologie en, als ik eerlijk ben, ook veel tweets over honden.