Sådan genskabes Medium's artikellayout med CSS Grid

Når folk tænker på CSS Grid, kan de normalt se forestillinger om billednet og fulde websider. Dog er CSS Grid faktisk en fremragende teknologi til også at lave artikler, da det giver dig mulighed for at gøre ting, som tidligere var vanskeligt at opnå.

I denne tutorial vil jeg forklare, hvordan man gendanner det berømte Medium-artikellayout ved hjælp af CSS Grid.

Bemærk: Jeg har også været med til at oprette et gratis 13-deligt CSS Grid-kursus på Scrimba. Få adgang til kurset her.

Klik på billedet for at komme til det fulde CSS Grid-kursus.

På kurset vil min kollega Magnus Holm gennemgå, hvordan man opretter en artikellayout ved hjælp af CSS Grid. Så hvis du foretrækker at se i stedet for at læse, skal du huske at tjekke hans screencast.

Indholdet

Vi vil starte med en grundlæggende HTML-fil, der indeholder den type indhold, du typisk finder i en Medium-artikel. For eksempel: titel, afsnit, undertekster, billeder, citater og så videre. Her er en outtake:

Kører en hvilken som helst NPM-pakke i browseren lokalt

JavaScript har aldrig haft nogen officiel løsning til distribution af pakker, og enhver webplatform (Rails, Django osv.) har deres egen idé om, hvordan man strukturerer og pakker JavaScript. I de sidste par år er NPM begyndt at blive den kanoniske måde at distribuere med Webpack som build-system på, men der er ingen måde at indlæse NPM-pakker i browseren uden en serversidekomponent.

Scrimba er en platform til interaktiv kodning screencast hvor kan du køre koden til enhver tid.

Hvis du åbner denne fil på et websted uden at justere noget layout, ser det sådan ud:

Ikke særlig elegant. Så lad os ordne det med CSS Grid. Vi gør det trin for trin, så det er let for dig at følge.

Grundlæggende opsætning af marginer

Den første ting, vi skal gøre, er at omdanne hele artikelmærket til et gitter og give det mindst tre kolonner.

artikel {
    display: gitter;
    gitter-template-kolonner: 1fr 740px 1fr;
}

Den første og sidste kolonne er lydhør og fungerer som marginer. De vil indeholde hvid plads i de fleste tilfælde. Den midterste kolonne er fastgjort til 740 pixels og holder indholdet af artiklen.

Bemærk, at vi ikke definerer rækkerne, da de simpelthen vil være så høje, som de skal være for at passe til deres indhold. Hver indholdsblok i artiklen (afsnit, billede, titel) får sin egen række.

Det næste trin er at sikre, at alt indhold i gitteret starter ved den anden kolonnelinje som standard.

artikel> * {
    gitter-søjle: 2;
}

Vi har nu følgende resultat:

Vi kan med det samme se, at dette ser bedre ud, da det hvide rum på hver side gør teksten lettere at læse.

Imidlertid kunne denne effekt være opnået lige så let ved at indstille egenskaben til venstre og højre margin til auto. Så hvorfor bruge CSS Grid?

Problemet opstår, når vi vil efterligne Medium's billedfunktioner. For eksempel at oprette billeder i fuld bredde, som denne:

Hvis vi havde brugt margin: 0 auto, ville dette have tvunget os til at anvende negative margener på billederne for at få dem til at optage hele webstedets bredde, hvilket er hacky.

Med CSS Grid bliver dette dog et stykke kage, da vi simpelthen bruger kolonner til at indstille bredden. For at få vores billede til at tage hele bredden, fortæller vi det bare fra den første til den sidste kolonnelinje.

artikel> figur {
    gitterkolonne: 1 / -1;
    margen: 20px 0;
}

Vi har også sat en margen øverst og nederst. Og så har vi et dejligt billede i fuld bredde:

Udvides med flere kolonner

Dette får os dog ikke hele vejen, da Medium har et par andre layouts, som vi skal redegøre for. Lad os se på et par af dem:

Mellemstore billeder

Dette er billedindstillingen mellem den normale og den fulde bredde, som vi vil kalde en mellemstor. Det ser sådan ud:

BEMÆRK: Hvis du ser på mobilen, er dette billede identisk med billedet i fuld bredde. I denne artikel fokuserer vi kun på skrivebordslayoutet.

Dette kræver mindst to nye kolonner til vores layout.

Citater

Derudover placerer Medium også en lodret linje på venstre side af artiklen, hvis du tilføjer et tilbud:

← Bemærk den lodrette linje. Vi bliver nødt til at tilføje en ekstra kolonne til vores gitter på grund af det.

Dette kræver en lille søjle på venstre side af gitteret. For at gøre tingene symmetriske, tilføjer vi også en lignende kolonne til højre.

Så for at understøtte både citater og mellemstore billeder bliver vi nødt til at opdele hele bredden i syv kolonner i stedet for tre, som denne;

artikel {
    display: gitter;
    gitter-template-kolonner: 1fr 1fr 10px 740px 10px 1fr 1fr;
}

Hvis vi bruger Chrome-inspektøren, kan vi faktisk se de underliggende rasterlinjer (se billede nedenfor). Derudover har jeg tilføjet pointer, der skal gøres for at gøre det lettere at genkende de forskellige kolonner.

Jeg har tilføjet tips, der skal gøres for at gøre det lettere at genkende de forskellige kolonner.

Den første ting vi skal gøre for at gøre alle standardelementer til at starte på den fjerde kolonnelinie i stedet for den anden.

artikel> * {
    gitter-søjle: 4;
}

Derefter kan vi oprette det mellemstore billede ved at gøre:

artikel> figur {
    gitter-søjle: 2 / -2;
    margen: 20px 0;
}

Sådan ser det ud med Chrome-inspektøren aktiveret:

Citater oprettes let ved at gøre følgende:

artikel> blockquote {
    gitter-søjle: 3/5;
    polstring til venstre: 10px;
    farve: # 666;
    kant-venstre: 3px massiv sort;
}

Vi får det til at spænde fra tredje til tredje til femte kolonnelinie. Vi tilføjer også polstring til venstre: 10px; så teksten ser ud til at starte på den fjerde kolonnelinje (den tredje kolonne er også 10 pixels bred). Sådan ser det ud på gitteret.

Sidemarks

Nu er der en sidste ting, vi har brug for at støtte. Medium har en ret flot måde at signalere, hvilket indhold i artiklen der er mest fremhævet. Teksten bliver grøn, og den får et Top-højdepunkt på højre side.

Tekstelementet Tophøjdepunkt ville være et mareridt at oprette, hvis vi havde brugt margin: 0 auto; i stedet hvis CSS Grid. Dette skyldes, at elementet fungerer forskelligt fra alle de andre elementer i artiklen. I stedet for at vises på en ny linje, antages det at vises på højre side af det forrige element. Hvis vi ikke brugte CSS Grid, var vi sandsynligvis nødt til at begynde at kommunikere med position: absolut; at gøre dette arbejde.

Men med CSS Grid er det superenkelt. Vi starter bare den slags element på den fjerde kolonnelinje.

.aside {
    gitter-søjle: 5;
}

Det vil automatisk gøre det til at placere sig til højre for artiklen:

Bemærk: Jeg har ikke fremhævet teksten i grønt, da det ikke har noget at gøre med CSS Grid.

Og det er det! Vi har nu gendannet det meste af Medium's artikellayout ved hjælp af CSS Grid. Og det var faktisk temmelig let. Bemærk dog, at vi ikke har rørt lydhørhed, da det kræver en helt ny artikel i sig selv.

Tjek denne Scrimba legeplads for at se på koden.

Tak for at have læst! Mit navn er Per, jeg er medstifter af Scrimba, og jeg elsker at hjælpe folk med at lære nye færdigheder. Følg mig på Twitter, hvis du vil have besked om nye artikler og ressourcer.