Lær CSS Grid på 5 minutter - En tutorial til begyndere

Gitterlayouter er grundlæggende for designet af websteder, og CSS Grid-modulet er det mest kraftfulde og nemmeste værktøj til oprettelse af det. Jeg personligt synes, det er meget bedre end for eksempel Bootstrap (læs hvorfor her).

Modulet har også fået indbygget support fra de store browsere (Safari, Chrome, Firefox, Edge), så jeg tror, ​​at alle front-end-udviklere bliver nødt til at lære denne teknologi i en ikke alt for fjern fremtid.

I denne artikel tager jeg dig gennem det grundlæggende i CSS Grid så hurtigt som muligt. Jeg vil udelade alt, hvad du ikke skal bekymre dig om, før du har forstået det grundlæggende.

Jeg har også oprettet et gratis CSS Grid-kursus. Klik her for at få fuld adgang til

det.

Alternativt kan du tjekke denne artikel, der forklarer, hvad du lærer i løbet af kurset:

Lad os nu springe ind i det!

Dit første gitterlayout

De to kerneingredienser i et CSS-gitter er indpakningen (forælder) og

genstande (børn). Indpakningen er det faktiske gitter, og varerne er indholdet inde i gitteret.

Her er markeringen for en indpakning med seks emner i den:

 1 2 3 4 5 6 

For at gøre vores indpakning divtil et gitter , giver vi det blot en visning af

grid:

Men dette gør ikke noget endnu, da vi ikke har defineret, hvordan vi vil have vores net til at se ud. Det stabler simpelthen 6 div'soven på hinanden.

Jeg har tilføjet lidt styling, men det har ikke noget at gøre med CSS-gitter.

Kolonner og rækker

For at gøre det todimensionalt skal vi definere kolonnerne og rækkerne. Lad os oprette tre kolonner og to rækker. Vi bruger den grid-template-rowog grid-template-columnegenskaber.

Som vi har skrevet tre værdier for grid-template-columns, får vi tre kolonner. Vi får to rækker, da vi har angivet to værdier for grid-template-rows.

Værdierne dikterer, hvor brede vi ønsker, at vores kolonner skal være (100 pixel), og hvor høje vi ønsker, at vores rækker skal være (50 pixel). Her er resultatet:

For at sikre, at du forstår korrekt forholdet mellem værdierne og hvordan gitteret ser ud, skal du også se på dette eksempel.

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Prøv at forstå forbindelsen mellem koden og layoutet.

Sådan spiller det ud:

Placering af emnerne

Den næste ting, du skal lære, er, hvordan du placerer genstande på nettet. Det er her, du får superkræfter, da det gør det enkelt at oprette layouts.

Lad os oprette et 3x3 gitter ved hjælp af den samme markering som før.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Dette vil resultere i følgende layout:

Bemærk, at vi kun ser et 3x2 gitter på siden, mens vi definerede det som et 3x3 gitter. Det er fordi vi kun har seks ting at udfylde nettet med. Hvis vi havde tre mere, ville den nederste række også blive udfyldt.

At position og ændre størrelsen emnerne vil vi målrette dem og bruge grid-columnog grid-rowegenskaber:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

Hvad vi siger her er, at vi vil have item1 til at starte på den første gitterlinje og slutte på den fjerde kolonnelinje. Med andre ord tager det hele rækken.

Sådan spiller det ud på skærmen:

Er du forvirret, hvorfor vi har 4 kolonnelinjer, når vi kun har 3 kolonner? Se på dette billede, hvor jeg har tegnet kolonnelinjerne i sort:

Bemærk, at vi nu bruger alle rækkerne i gitteret. Da vi fik det første element til at tage hele første række op, skubbede det resten af ​​varerne ned.

Endelig vil jeg gerne vise en enklere måde at skrive syntaksen ovenfor:

For at sikre, at du har forstået dette koncept ordentligt, lad os omarrangere elementerne en smule.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Sådan ser det ud på siden. Prøv at pakke dit hoved rundt, hvorfor det ser ud som det gør. Det burde ikke være for hårdt.

Og det var det!

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.