Share
I denne opplæringen skal vi bruke CSS Grid for å hjelpe oss med å lage en "ødelagt grid layout", noe som alltid har vært vanskelig med mer tradisjonelle CSS layout metoder.
Her er det vi jobber med (se på den større versjonen for full effekt):
Denne designen er basert på Anthony Harmons arbeid, som er perfekt for vår demo. Ta en titt på dette oppsettet han gjorde for Relakustikk:
Skål Anthony :)Webdesignere har blitt betinget gjennom årene for å observere dokumentflyt og kildeordre; lage oppsett av flytende blokker og la dem fylle siden som å bygge murstein. I verden med responsiv design virker denne tilnærmingen ganske naturlig. Det er imidlertid langt fra utskriftsoppsettet hvor faste dimensjoner betyr at designere trygt kan plassere tekst og bilder nøyaktig hvor de vil, noe som fører til flere eksperimentelle og visuelt dristige oppsett.
CSS Grid, utover bare å la oss ordne ting langs x og y akser, kan hjelpe oss med å bygge bro over layoutgapet og bli litt mer dristig med våre design!
"Vi må begynne å reimagining hva god grafisk design kan være med overlappende ting." - Jen Simmons
Tid til å bli sittende fast i.
Gittersøyler trenger ikke å være ensartede. La oss ta en del av oppsettet ovenfor og finne ut hvordan nettet kan se ut.
Merk: Vi bygger bare en del i denne opplæringen. Det er ingen grunn til at hver av sideseksjonene ikke kan bygges fra uavhengige ruter.
Vi starter med litt oppskrift, en rutenett:
Deretter, på den beholderen, vil vi erklære skjerm: grid; Definer deretter kolonnene og radene.
.grid1 display: grid; rutenett-mal-kolonner: 3fr 6fr 1fr 5fr 10frfr 2fr; rutenett-mal-rader: 100px auto 15px auto auto;
Kolonnene er lagt ut akkurat som du ser dem i bildet ovenfor. De fr Enheten er en brøkdel av hele bredden, så den første kolonnen tar opp tre av dem, den andre er bredere og tar opp seks. Totalt består vårt layout av 27 enheter med bredde - knapt klassiske rutenettforhold!
Rynene er litt forskjellige. Du får se en blanding av faste pixelmålinger og auto. Hvor auto brukes, vil rækken vokse og krympe avhengig av innholdet.
La oss begynne med bildene. For oppslaget har vi et par alternativer; enten bruker vi img elementer, eller vi bruker andre elementer med en bildebakgrunn.
Vi kunne bruke objekt-fit: deksel; på img elementer, men det er vanskelig - hvorfor gjør livet vårt vanskeligere ?! Så for denne demonstrasjonen går vi med sistnevnte, fordi det gir oss større fleksibilitet når det gjelder hvordan forandringene av bildene endres med væskeoppsett.
Hallo til noen gode ol 'divs:
Med noen bakgrunnsbilder som dekker dem:
.img1 bakgrunn: url (wooden.jpg); bakgrunnsstørrelse: deksel; .img2 bakgrunn: url (speaker.jpg); bakgrunnsstørrelse: deksel; .img3 bakgrunn: url (waves.jpg); bakgrunnsstørrelse: deksel;
Grid's auto-plasseringsalgoritme vil ha satt dem pent på nettet vårt, men la oss få bestemt. Vi bruker nettlinjene til å diktere hvor hvert element skal begynne og slutte.
Vårt første bilde starter på kolonnelinje 1, og slutter på 3. Vi kan definere det slik:
rutenett-kolonne: 1/3;
eller slik:
rutenett-kolonne: 1 / span 2;
Når det gjelder rader, må vårt første bilde starte på rad linje 2 og slutte på 5, som vi kan si slik:
rutenett: 2/5;
eller dette:
rutenett: 2 / span 3;
La oss nå gjøre det samme for våre andre to bilder. Dette er hva du bør ende opp med:
Ganske vist er det ikke særlig imponerende, men det er fordi de fleste radene ennå ikke har noen høyde. De får det når vi begynner å legge til mer innhold i neste trinn.
For mer om hvordan gitter-kolonne og gitter-rad arbeid, ta en titt på disse hurtige opplæringsprogrammene:
La oss nå legge til tekstinnholdet; en blockquote i en wrapper og call to action block. Du kan legge til disse uansett hvor du liker som barnelementer i .grid1 container, kildebestilling spiller ingen rolle.
"Nesten umiddelbart, ordet spredt av en walisisk mann som hadde bygget dette utrolige lydende bassystemet, og snart nok audiophiles begynte å lete etter disse legendariske delene som ble bygget som ingen andre."Gibraltar
Vi presenterer 212 / SE, vår mest kraftfulle og smidige subwoofer, designet eksklusivt for større systemer og rom for å tillate toppmoderne høyttalere å springe til full stemme.
Se produktdetaljer →
Neste, før vi stiler noe, plasserer vi dem på rutenettet som vi gjorde med bildene:
.stropplinje grid-column: 3 / span 3; rutenett: 2 / span 1; .cta-wrapper grid-column: 4 / span 2; rutenett: 4 / span 2;
Ser bedre ut!
På dette punktet er det verdt å merke seg at du kan spille med z-indeksen hvis du vil. Stacking følger som standard kildeordren; Det som er først i oppslaget blir plassert nederst, det som er erklært senere, går øverst. Men hvis vi skulle søke z-indeks: 1; til .img1 det ville bli stablet på toppen av .img2.
Hvis du slår på nettleserinspektøren, vil du i dag gi deg litt hjelp med nettoppsettet. I Chrome-inspektøren vil valg av elementer trekke opp rutenettlinjer og målinger, slik som:
Inspektøren i Firefox vil gjøre enda mer, slik at du kan overlappe rutenettet ved hjelp av kontroller under Oppsett fane. Du kan vise linjenumrene, områdets navn og navigere rutenettene på en mindre miniatyrversjon:
Tips: når du ser under regler fanen, trykk på rutenettikonet ved siden av vise å veksle overlegget:
Ved å inspisere rutenettet vil du raskt innse om du har feilplassert noe rutenett, hoppet over en rad her eller der, eller heter noe feil.
Noen raske skriftdeklarasjoner og knappestiler vil få dette til å se enda bedre ut, uten for mye innsats. Vi begynner med å koble noen Google-skrifttyper i av dokumentet:
Vi bruker Open Sans for kroppen, Playfair Display for blockquote og overskrift. La oss bruke dem:
kropp farge: # 292929; font: 1em / 1.7 'Open sans', sans-serif; blockquote font: italic 1.1em / 2 'Playfair Display', serif; margin: 0 0 2em 0; .cta h1 font: bold 6em / 1 'Playfair Display', serif; margin: 0 0 20px 0; stilling: relativ;
Nå noen knappestiler:
.knapp display: inline-block; farge: hvit; tekst-dekorasjon: ingen; bakgrunn: # 292929; polstring: .8em 1.5em; . knapp: hover bakgrunn: svart;
Til slutt vil vi justere blokkkvoten til midten, og deretter legge til noen utfylling til handlingen, og bidra til å fylle ut raden den er plassert i. Her er hva du burde ha nå:
Husk at vi bygger vår layout for en bred visningsport. Det du ser innebygd i opplæringen, ser kanskje ikke ut optimal.
Designet vi jobber med har et par visuelle berøringer som vi ikke har brukt ennå. Vi kan legge til disse på ulike måter, men som de ikke er innhold Som sådan vil vi legge til dem ved hjelp av CSS pseudo-elementer. Først sprer du over blockquote:
.strapline margin-top: 100px; stilling: relativ; .strapline :: før innhold: "; vise: blokk; bakgrunn: url (wavy.svg) repeat-x; bakgrunnsstørrelse: deksel; bredde: 20%; høyde: .5em; posisjon: absolutt; topp: 3em; venstre: 40%;
Disse stilene bruker a ::før pseudoelement på .Straplinen div, posisjonering den over selve beholderen med en negativ toppstilling. Det er perfekt sentrert, og du vil huske at vi fikk nok plass til det ved å definere vår første rad som 100px høy.
Vi vil gjøre noe som ligner på et SVG-merke på overskriften:
.cta h1 :: før innhold: "; display: blokk; høyde: 1em; bredde: 1em; bakgrunn: url (badge.svg) no-repeat center senter; bakgrunnsstørrelse: 80%; posisjon: absolutt; 120px; topp: 0;
Igjen bruker vi et pseudoelement fordi det er rett og slett en visuell blomstring i motsetning til å være verdifullt innhold. Det er ikke å si at du ikke kunne ha lagt den til som en
Vi har nå bygget oss et veldig solid, ødelagt rutenettoppsett! Tid for noen neste skritt for å ta det enda lenger.
CSS Grid er ganske godt støttet i dag, selv om IE11 fortsatt krever en forhåndsdefinert versjon, så du vil kanskje bryte rutenettstablene dine i en @supports erklæring. Det ville se slik ut:
@supports (display: grid) / * grid layout * / .grid1 display: grid; rutenett-mal-kolonner: 3fr 6fr 1fr 5fr 10frfr 2fr; rutenett-mal-rader: 100px auto 15px auto auto; ...
Enhver nettleser som ikke støtter CSS-nettverket på riktig måte, vil ignorere hva du har lagt inn i denne erklæringen, og gir deg muligheten til å gi en tilbakebetaling.
Ta en titt på Grid "fallbacks" og overstyrer ideer om hvordan du stiler fallbacks hvis du vil.
Vårt oppsett ser skarpt ut på større skjermbilder, men når det klemmes inn i mindre visningsporte (for eksempel når det legges inn i denne opplæringen) vises det noen sprekker. Hvordan vil du håndtere dette på en responsiv måte? Hvis du legger til medieforespørsler, kan du opprette stilene først, og deretter gradvis bygge opp for å legge ut og gjøre gridet mer komplekst, fordi visningsportene blir bredere:
.grid1 display: grid; rutenettmall-kolonner: 1fr 1fr; @media bare skjerm og (min bredde: 768px) .grid1 grid-template-kolonner: 3fr 6fr 1fr 5fr 10frfr 2fr; rutenett-mal-rader: 100px auto 15px auto auto;
Du kan også velge å gjemme de blomstrene vi opprettet på mindre enheter, og lagre dem til det er mer skjermeiendom å leke med. Valget er ditt!
Her er et eksempel på hvordan du kan gjøre dette bestemte design responsivt.
Denne opplæringen har gitt deg et glimt inn i verden med alternative oppsett som kan oppnås med CSS Grid. Glem layoutene du har trent med flyter og posisjonering; bryte de gamle vaner! Begynn å utforske mer intrikate layouter og la oss se om vi kan gjøre nettet litt mer interessant.
Accentsconagua