Share
Kortmønsteret har hatt stor suksess i nyere tid, men måten vi bygger dem er fortsatt begrenset på grunn av CSS tilgjengelig for oss. Inntil nå er det det. Ved å kombinere CSS Grid og Flexbox, kan vi lage kort som justerer seg pent, oppfører seg responsivt og som tilpasser seg innholdet i dem. La oss se hvordan!
Vi skal bygge dette kortet brukergrensesnittet (se fullversjonen for en klarere ide):
Ved forskjellige bruddpunkter vil kortarrangementet endres som følger:
1: liten, 2: medium, 3: stor viewportNår Flexbox slo på CSS-scenen, kunne det høres grøt over hele verden; Til slutt hadde vi en layoutmodul for å løse alle våre float frustrasjoner. Men det var egentlig ikke tilfelle. Flexbox fungerer best for å distribuere elementer langs en enkelt akse; enten horisontalt langs en rad, eller vertikalt som en kolonne. Å bygge et virkelig fluidnett med Flexbox er vanskelig.
Rutenett, imidlertid, er beregnet til å legge ut elementer over to akser (eller dimensjoner); horisontalt og vertikalt. I denne opplæringen skal vi bruke hver for det formål det var ment, og gir oss en veldig solid løsning. La oss begynne!
Nylig bbc.co.uk lanserte (i beta) deres siste iterasjon, går rent og romslig med deres kortbrukergrensesnitt. Ignorer de elendige overskriftene, dette ser flott ut.
Toppkortene er bygget og justert på tvers av rad med Flexbox, men vi skal utvide på layoutet ved hjelp av Grid.
Merk: For å følge med må du ha en nettleser som støtter Grid. Her er litt info for å komme i gang.
La oss begynne med en wrapper for vårt rutenett Plasser så mange kort som du vil; vi bruker sju. Hver har en miniatyrbilde La oss nå kaste av noen stiler ved å arrangere hver av disse elementene i et rutenett. Merk: Hvis dette er din første foray i "Grid", vil du kanskje komme opp til fart ved å lese de første opplæringene i Forstå CSS Grid Layout. Vi kommer til å gå mobil først her, så de første stilene vil gi vår innpakning en bredde og sentrere den, og sett deretter noen Grid-regler: Viktigst, her sier vi at vår Så sier vi Til slutt definerer vi en På bredere viewports (500px er helt vilkårlig), endrer vi Til slutt, for større skjermer vil vi gå med en fire kolonneoppsett. Her kunne vi også ha skrevet Så hva har det gitt oss? Det har gitt oss et ganske solidt gridoppsett, og hvis du er en fan av brutalisme, vil du kanskje beholde ting som dette, men for alle andre, la oss få våre kort til å se litt mer ut som kort. Vi starter med dette: Dette gir oss noen grunnleggende stiler: en hvit bakgrunn, ingen understreke for teksten, en grå farge og en pen Deretter erklærer vi at kortet skal være La oss gjøre noen andre forbedringer før du dykker videre inn i Flexbox. Legg til en Deretter løfter du på svingen, og gjør skyggen mer uttalt: Nå legger vi til noen generelle stilarter til typografien for å endre fargene og avstanden. Her er hva du bør ha: Hver miniatyrbilde vil bli brukt som et bakgrunnsbilde, så vi legger til noen markering over hele linja, slik: Nå sørger vi for at God jobb, det gir oss dette: Nå vil vi at forfatternavnet skal justeres nederst på kortet, uavhengig av hvor mye innhold det er over det. Det er her Flexbox kommer igjen: Vi bruker shorthand Deretter erklærer vi at artikkelen er en flexbeholder i sin egen rett, og igjen erklærer vi Det er alt bra, men det gir oss disse merkelige, vandrende avsnittene i midten av kortene våre. For å justere disse riktig, la vi legge til Bedre! På dette punktet er vi ganske mye pakket inn, men det eneste som Grid tillater oss å gjøre nå, er helt å endre oppsettet ved å plassere våre gridartikler hvor vi vil, og i hvilken størrelse som helst. For denne demonstrasjonen ønsket vi å lage det aller første kortet (la oss kalle det vårt "kjente kort") to kolonner brede for noe annet enn de minste visningene. I vår første medieforespørsel, la oss gjøre dette: Harking tilbake til vår introduksjonsveiledning på gridområder, her sier vi at, utover 500px, bør det første elementet begynne på gridlinje 1 og spenne over to spor. Resten av rutenettene faller automatisk på plass. Innenfor samme utskriftsjobb har jeg også rammet Dette har vært en god øvelse i å bruke Grid med Flexbox; Rutenettet håndterte vår viktigste todimensjonale oppsett, og Flexbox håndterte den vertikale fordelingen av elementene i kortene våre. Ha det gøy å leke med det!, noen gitterelementer for å ordne alt
, og noen ankre (hvert anker blir et kort):
som vi vil gi et bakgrunnsbilde senere. Så er det en
, som igjen huser en , en for forfatteren, og kanskje til og med a for litt mer informasjon.Grid Grunnleggende
.band bredde: 90%; maksimal bredde: 1240px; margin: 0 auto; skjerm: grid; grid-template-kolonner: 1fr; rutenett-mal-rader: auto; grid-gap: 20px;
.bånd vil være skjerm: grid;. Vi erklærer da gitter-mal-kolonner av 1fr, som sier at hver kolonne vil ta opp en enkelt brøkdel av de tilgjengelige. Vi har bare erklært en for nå, så hver kolonne fyller hele bredden.rutenett-mal-rader: auto;. Dette er faktisk standardverdien, slik at vi kunne ha utelatt det, og betyr at radhøydene vil bli bestemt utelukkende av innholdet.gitter-gap av 20px, som gir oss vår kolonne- og radguttere.Media Query Numero Uno
gitter-mal-kolonner å gi oss mulige to kort per rad. Nå er det to kolonner, som hver er en av de tilgjengelige to fraksjonene.@media bare skjerm og (min bredde: 500px) .band grid-template-kolonner: 1fr 1fr;
Media Query Numero Dos
@media bare skjerm og (min bredde: 850px) .band grid-template-kolonner: 1fr 1fr 1fr 1fr;
gjenta (4, 1fr) i stedet for 1fr 1fr 1fr 1fr. For mer informasjon om hvordan fr enhet fungerer, sjekk ut CSS Grid Layout: Fluid kolonner og bedre Gutters.Styling kortene
.kort bakgrunn: hvit; tekst-dekorasjon: ingen; farge: # 444; boks-skygge: 0 2px 5px rgba (0,0,0,0,1); display: flex; flex-retning: kolonne; Min høyde: 100%;
box-shadow å gi oss litt dybde.display: flex;. Dette er viktig - vi vil tilpasse innholdet på kortet vertikalt, ved hjelp av Flexbox. Derfor oppgir vi også flex-retning: kolonne; å gi oss vår vertikale akse. Til slutt erklærer vi Min høyde: 100%; for at alle kortene fyller høyden til foreldrene (vårt rutenettelement). Godt jobba! Det gir oss dette:
Hover State
stilling: relativ; og a overgang slik at vi kan flytte kortet på svingeren: stilling: relativ; topp: 0; overgang: alle .1s enkelt inn
.kort: hover toppen: -2px; boks-skygge: 0 4px 5px rgba (0,0,0,0,2);
typografi
.kort artikkel polstring: 20px; / * typografi * / .kort h1 skriftstørrelse: 20px; margin: 0; farge: # 333; .kort p linjehøyde: 1,4; .kortspor font-size: 12px; font-weight: bold; farge: # 999; tekst-transformer: store bokstaver; brevavstand: .05em; margin: 2em 0 0 0;
miniatyrbilder
.tommel divs har noen dimensjoner, og at bakgrunnsbildene fyller dem ordentlig:.kort .thumb polstring-bunn: 60%; bakgrunnsstørrelse: deksel; bakgrunnsposisjon: senter senter;
Flexbox Artikkel
.kort artikkel polstring: 20px; flex: 1; display: flex; flex-retning: kolonne; begrunn-innhold: mellomrom mellom;
flex: 1; å påstå at dette flex-elementet (det fortsatt er et barn av den originale flexbeholderen) skal vokse for å ta opp all ledig plass.flex-retning: kolonne; å gi oss vertikal distribusjon. Til slutt, begrunn-innhold: mellomrom mellom; sier at alle flex-elementene i det skal spres jevnt langs aksen, med like mellomrom mellom.
flex-grow: 1; (eller ganske enkelt flex: 1;) til dem, slik at de fyller alle de gjenværende vertikale rom, tilpasse seg pent til toppen..kort p flex: 1; / * gjør p vokse for å fylle ledig plass * / linjehøyde: 1,4;
Endre rutenettet
@media bare skjerm og (min bredde: 500px) ... element-1 grid-column: 1 / span 2;
skriftstørrelse av overskriften i vårt utvalgte kort.Konklusjon
Videre lesning
Accentsconagua