Layout på Grid i CSS. Komplett veiledning og referanse. Hva er et fleksibelt rutenett i responsiv layout

Fra forfatteren: Når du lager komplekse nettsteder, utgjør rutenett en stor forskjell. Deres betydning i moderne webdesign blir tydelig når du ser på antall rammeverk der denne teknologien er implementert for å få fart på utviklingen.

Når du først er kjent med CSS Grid Layout-spesifikasjonen, trenger du ikke lenger separate filer stiler hvis du vil jobbe med et rutenettsystem. Ikke mindre en viktig fordel vil være at du ikke lenger vil stole på inline- og flyttypeegenskaper for å plassere elementer på siden. I denne opplæringen vil vi lære det grunnleggende om rutenettsystemer og også lage et enkelt bloggoppsett.

Nettleserstøtte

På dette øyeblikket bare IE 10+ og Edge støtter Grid Layout-spesifikasjonen - på kommersielle nettsteder denne teknologien kan ikke brukes ennå.

I Chrome dette Alternativet kan aktiveres via "Experimental Web Platform features"-flagget i chrome://flags. I Firefox – layout.css.grid.enabled flagg.

Et annet alternativ er å bruke polyfill, og ja, polyfill CSS-rutenett Polyfill finnes! Du kan bruke hvilket som helst av de tre alternativene som er beskrevet og studere Grid Layout mens det fortsatt er på et tidlig stadium av utviklingen.

Vennligst merk: I IE fungerer det for øyeblikket gammel versjon spesifikasjonen, noe som betyr at nettleseren ikke fullt ut støtter den nye spesifikasjonen. Når vi kommer til eksemplene anbefaler jeg at du bruker Chrome eller Firefox.

Grid System terminologi

Når det gjelder plassering av elementer, er CSS Grid-systemer de samme tabellene. derimot dette verktøyet mye kraftigere og mer mangfoldig. I denne seksjonen Jeg skal snakke om noen begreper du må huske når du arbeider med rutenett:

Måleenheter fr: Bruk disse til å stille inn mengden ledig plass. Brukes sammen med rutenett-rader og rutenett-kolonner. Fra spesifikasjonen: "Plassallokering skjer først etter at alle "lengder" eller størrelser på rader og kolonner med innhold er nådd maksimale dimensjoner»

Linjer: Linjer markerer grensene til andre elementer. De er både horisontale og vertikale. På bildet under er det 4 vertikale og 4 horisontale linjer.

Spor: Spor – mellomrommet mellom parallelle linjer. På bildet under er det 3 vertikale og 3 horisontale spor.

Celler: Celler – byggeklosser rutenett Det er bare 9 celler i bildet nedenfor.

Arealer: Et område er et rektangel med et vilkårlig antall celler. De. et spor er både et område og en celle.

Plassering av elementer i et rutenett

La oss starte med det grunnleggende. I denne delen skal jeg vise deg hvordan du bruker et rutenett til å plassere elementer på bestemte steder. For å jobbe med CSS Grid Layout må du opprette et overordnet element og ett eller flere barn. For eksempel tar jeg markeringen nedenfor:

< div class = "grid-container" > < div class = "grid-element item-a" >EN< / div > < div class = "grid-element item-b" >B< / div > < div class = "grid-element item-c" >C< / div > < div class = "grid-element item-d" >D< / div > < div class = "grid-element item-e" >E< / div > < div class = "grid-element item-f" >F< / div > < / div >

For å lage et rutenett må beholderen spesifisere egenskapene display:grid eller display:inline-grid, samt andre stiler:

Rutenettbeholder (visning: rutenett; rutenett-mal-kolonner: 200px 10px 0.3fr 10px 0.7fr; rutenett-mal-rader: auto 20px auto; )

Rutenett - beholder ( display:grid; rutenett-mal-kolonner: 200px 10px 0.3fr 10px 0.7fr; rutenett-mal-rader: auto 20px auto;

Egenskapene grid-template-columns og grid-template-rows angir bredden på radene og kolonnene. I eksemplet ovenfor opprettet jeg 5 kolonner. En 10px bred kolonne brukes som skilletegn mellom elementene. Den første kolonnen har en bredde på 200px. Den tredje kolonnen tar opp 0,3 av den gjenværende plassen. Og den femte kolonnen tar opp 0,7 av den gjenværende plassen.

Fordi den første raden er satt til grid-template-rows: auto, lar dette raden utvides etter hvert som innhold legges til. 20px-linjen fungerer som en separator. I demoen under kan du se at elementene presses tett mot hverandre.

Vær oppmerksom på element B - det er plassert i den andre kolonnen, som vi bruker som skilletegn. Hvis plassering av elementer ikke er angitt manuelt, vil nettleseren plassere elementer i celler fra venstre til høyre, og hvis de ikke passer i én rad, vil de resterende hoppe til den andre raden. Derfor la vi igjen 4 reservekolonner på den andre linjen.

For å flytte et element til en gitt rutenettcelle, må du angi plasseringen av dette elementet via CSS. Før jeg forklarer hvordan du flytter mesh-elementer, ta en titt på bildet nedenfor.

I dette eksemplet vil vi bruke et lineært elementplasseringssystem. Lineært system betyr at linjene i rutenettet vil spille en dominerende rolle i plasseringen av elementer. La oss ta element B som et eksempel denne blokken starter på tredje linje og slutter på fjerde linje med kolonner. Bortsett fra vertikale linjer dette elementet plassert mellom linjene på første og andre rad.

For å sette starten vertikal linje element vil vi bruke egenskapen grid-column-start. I vårt tilfelle vil verdien være 3. Grid-column-end-egenskapen indikerer den vertikale sluttlinjen til elementet. I vårt tilfelle er det 4. Verdier for horisontale linjer vises på samme måte.

Basert på ovenstående konkluderer vi med at for å flytte element B til den andre cellen, må du bruke koden:

Element-b ( rutenett-kolonne-start: 3; rutenett-kolonne-slutt: 4; rutenett-rad-start: 1; rutenett-rad-slutt: 2; )

Element - b ( rutenett - kolonne - start : 3 ; rutenett - kolonne - ende : 4 ; rutenett - rad - start : 1 ; rutenett - rad - ende : 2 ;

På samme måte, for å flytte element F til den sjette cellen:

Element-f ( rutenett-kolonne-start: 5; rutenett-kolonne-slutt: 6; rutenett-rad-start: 3; rutenett-rad-slutt: 4; )

Element - f ( rutenett - kolonne - start : 5 ; rutenett - kolonne - ende : 6 ; rutenett - rad - start : 3 ; rutenett - rad - ende : 4 ;

Opprette en grunnleggende layout

Nå skal vi lage et grunnleggende bloggoppsett, som vil ha en topptekst, bunntekst, sidefelt og to seksjoner for innhold. Først merkingene:

< div class = "grid-container" > < div class = "grid-element header" >Overskrift< / div > < div class = "grid-element sidebar" >Sidefelt< / div > < div class = "grid-element main" >Hovedinnhold< / div > < div class = "grid-element extra" >Ekstra info< / div > < div class = "grid-element footer" >Bunntekst< / div > < / div >

Husk at rekkefølgen som tagger plasseres i i markeringen ikke påvirker plasseringen av elementer på nettsiden. Uten å endre CSS kan du sette bunnteksten i markeringen over toppteksten, men plasseringen av elementene forblir den samme. Men jeg anbefaler ikke å gjøre det. Hovedideen her er at markeringen ikke lenger forteller deg hvor elementet vil bli plassert.

Alt vi trenger å gjøre er å definere verdiene til egenskaper som rutenett-rad-ende for alle elementer. Som i forrige eksempel vil vi bruke et rutenettdiagram for å bestemme egenskapsverdiene.

Hei alle sammen! I dag skal vi snakke om hva er nettsystemer? eller rett og slett fleksible masker inn adaptiv layout .

La oss først definere hva det er Rutenettsystem.

Rutenettsystem- en samling klassebaserte stiler som lar brukeren kontrollere sideoppsettet ved hjelp av et system med rader og kolonner.

La oss tenke oss at vi har en bloggside. Den er delt inn i 2 kolonner: hoveddelen til venstre og sidefeltet til høyre. La oss prøve å lage et fleksibelt rutenett for en slik side.

Vel, først må vi gjøre noe grunnleggende, men... html markeringer.

Her har vi en blokk som inneholder hele siden, den inneholder en blokk med en blogg, som inneholder 2 blokker: hoveddelen av siden og sidefeltet.

Så hele siden vår vil ha størrelsen 960 piksler. Hele rutenettet er delt inn i 12 kolonner 69 piksler. Hver. Bloggdelen blir bred 900 piksler. Hoveddelen av siden vil være 566 piksler, sidefelt - 331 piksler.

Dette er hva vi får til slutt

#side (
margin: 36px auto;
bredde: 960px;
}

Blogg (
margin: 0 auto 53px;
bredde: 900px;
}

Blog.main (
flyte: venstre;
bredde: 566px;
}

Blogg .sidebar (
flyte: høyre;
bredde: 331px;
}

Alt ville være bra, men som du kan se, er alt dette statisk, spesifisert i piksler. Vi vil at rutenettet vårt skal endre størrelsen avhengig av hvilken skjerm siden vises på, derfor må vi stille inn alt prosent. La oss gjøre dette.

For dette er det samme formel som for fonter

mål / kontekst = resultat

La oss konvertere en blokk av hele siden fra piksler til prosenter.

#side (
margin: 36px auto;
bredde: 90 %;
}

90% valgt fordi vi i dette tilfellet også vil ha innrykk langs kantene langs 5% . Du kan imidlertid velge en annen verdi.

Vi bruker vår formel: 900 / 960 = 0.9357

La oss multiplisere resultatet med 100 for å motta renter, og vi vil registrere det i vår css.

Blogg (
margin: 0 auto 53px;
bredde: 93,75 %;
}

Det samme må gjøres med kolonnene, men legg merke til at konteksten har endret seg. Fordi kolonnene er inne i en blokk med en klasse .blogg, så blir det konteksten. La oss regne ut.

566 ÷ 900 = .628888889

331 ÷ 900 = 0,367777778

Vi konverterer alt til prosenter og skriver det i stilarket.

Blog.main (
flyte: venstre;
bredde: 62,8888889 %;
}

Blogg .sidebar (
flyte: høyre;
bredde: 36,7777778 %;
}

Det er alt! Nå har vi et fleksibelt rutenett og kan bruke det til layout.

Som du kan se, er alt veldig enkelt. Grunnlaget for et fleksibelt rutenett, som en fleksibel font, er den samme formelen, og husk hvilken du enkelt kan lage responsive nettsteder.

Notatet! Som du ser endte vi opp med ganske lange prosentverdier. Noen kan råde deg til å samle dem opp, men du bør aldri gjøre dette! Huske!

Og det er alt for meg, takk for oppmerksomheten og vellykket adaptiv layout!

Det var en gang jeg skrev om uvanlig service, som er en AI for å lage et nettsted. Etter de nåværende resultatene å dømme, viste de seg "så som så", spesielt med tanke på den oppgitte prisen. i denne forbindelse vil de være mer effektive.

I dag vil jeg snakke om en "teknologi" som er lik i navn, men helt annerledes i hovedsak - CSS Grid! Innlegget består av flere deler:

Denne tilnærmingen til å bygge oppsett gjør det enkelt å lage ganske fleksible nettsider med bruker CSS. I fremtiden vil den trolig bli brukt overalt. Hvis jeg forstår det rett er den perfekt for de samme oppgavene som Flexbox, men i motsetning til den kan den samtidig fungere i todimensjonale dimensjoner (kolonner og rader). Nedenfor tilbyr jeg en oversettelse av artikkelen, som er en slags introduksjon til temaet og inneholder enkle pedagogiske eksempler. Merk følgende! Forfatteren av notatet gjennomfører et gratis(!) kurs på CSS Grid i desember, hvis du vil, send en forespørsel til hans e-post.

Jeg fant også en nyttig video om emnet på Internett. Kanskje det er lettere for noen å oppfatte informasjon slik:

Introduksjon til CSS Grid

I år fikk denne teknologien innebygd støtte i Chrome, FF, Safari, så det er sannsynlig at den vil bli et populært verktøy i nær fremtid. Men foreløpig må du huske å ta vare på utdaterte og hengende nettlesere.

Den enkleste mesh

Det er 2 hovedobjekter her:

• forelder / innpakning (pakke inn alle de interne blokkene som utgjør den);
• barn/gjenstander (selve elementene).

Her er det enkleste designet:

Innpakning (visning: rutenett; )

Men umiddelbart etter dette vil ingenting mye endre seg, siden visningsformatet ikke er definert. Du vil se 6 DIV-er som følger hverandre.

Kolonner og rader

For å gjøre rutenettet ditt todimensjonalt må du spesifisere parametrene for radene og kolonnene - bruk alternativene rutenett-mal-rad Og rutenett-mal-kolonne henholdsvis:

.wrapper (visning: rutenett; rutenett-mal-kolonner: 100px 100px 100px; rutenett-mal-rader: 50px 50px;)

Wrapper (visning: rutenett; rutenett-mal-kolonner: 100px 100px 100px; rutenett-mal-rader: 50px 50px; )

Siden det er tre verdier for kolonnene, vil det samme antallet av dem bli generert, derfor er det bare 2 rader Tallene i piksler angir bredden på elementene i det første tilfellet (100px hver), og høyden. (50px) i den andre.

Her er et annet eksempel for å hjelpe deg bedre å forstå hvordan det fungerer:

.wrapper ( display : rutenett; rutenettmal-kolonner : 200px 50 piksler 100 piksler ; rutenettmal-rader : 100 piksler 30 piksler ; )

Wrapper (visning: rutenett; rutenett-mal-kolonner: 200px 50px 100px; rutenett-mal-rader: 100px 30px; )

Følgende bilde vil vises:

Plassering og dimensjoner

Med denne funksjonen vil du få veldig kraftige muligheter for å lage nettstedsnett. La oss si at vi har en størrelse på 3x3:

.wrapper (visning: rutenett; rutenett-mal-kolonner: 100px 100px 100px; rutenett-mal-rader: 100px 100px 100px;)

Wrapper (visning: rutenett; rutenett-mal-kolonner: 100px 100px 100px; rutenett-mal-rader: 100px 100px 100px; )

Hvis HTML-koden, som i vårt eksempel, har 6 DIV-elementer (se helt i begynnelsen), så i i dette tilfellet Kun 2 rader vil vises på siden, den tredje vil midlertidig ikke bli fylt. Men når vi begynner å bruke forskjellige parametere for posisjon og blokkstørrelser - rutenett-kolonne rutenett-rad, vil situasjonen endre seg.

Vi tildeler stiler til ett av objektene:

.item1 ( rutenett-kolonne-start : 1 ; rutenett-kolonne-slutt : 4 ; )

Vare1 ( rutenett-kolonne-start: 1; rutenett-kolonne-slutt: 4; )

Dette betyr at DIV med klasseelement1 starter fra den første linjen i kolonnen i rutenettet og slutter på den 4., det vil si at den fyller hele raden.

Faktisk, nå har noen objekter flyttet til den siste linjen, som vi hadde skrevet på forhånd (3x3). Det er et enklere alternativ:

.item1 ( rutenett-kolonne : 1 / 4 ; )

Vare1 ( rutenett-kolonne: 1 / 4; )

.item1 ( rutenett-kolonne-start : 1 ; rutenett-kolonne-slutt : 3 ; ) .item3 ( rutenett-rad-start : 2 ; rutenett-rad-slutt : 4 ; ) .item4 ( rutenett-kolonne-start : 2 ; rutenett-kolonne-ende: 4;

Element1 ( rutenett-kolonne-start: 1; rutenett-kolonne-slutt: 3; ) .item3 ( rutenett-rad-start: 2; rutenett-rad-slutt: 4; ) .item4 ( rutenett-kolonne-start: 2; rutenett-kolonne-ende: 4 )

Det gir oss følgende bilde:

Klarte du å finne ut av det? I prinsippet er det ikke vanskelig, men du må forstå at dette bare er grunnleggende del nyanser på CSS Grid.

Prototyping og layoutområder med CSS Grid

Markup-koden er som følger (HTML):

Container ( display: grid; grid-mal-columns: repeat(12, 1fr); grid-mal-rows: 50px 350px 50px; grid-gap: 5px; )

Hvis alt er klart i prinsippet om radene, må kolonnene avklares. Her i betydningen rutenett-mal-kolonner det lages et rutenett som består av 12 identiske kolonner (bredden på hver = 1/12 av totalen) + 5px marginer mellom dem (rutenett-gap).

Legg til rutenett-mal-områder

Dette alternativet gir deg enda mer fleksibilitet og fantastiske funksjoner. Kanskje syntaksen og formateringen av parameteren rutenett-mal-områder ser litt uvanlig ut, men videre vil du forstå hvorfor alt er akkurat slik:

.container ( display : rutenett; rutenett-gap: 5px ; rutenett-mal-kolonner : gjenta (12 , 1fr) ; rutenett-mal-rader : 50px 350px 50px ; rutenett-mal-områder : "f h h h h h h h c f" f c f f f f ";)

Beholder (display: rutenett; rutenett-gap: 5px; rutenett-mal-kolonner: gjenta(12, 1fr); rutenett-mal-rader: 50px 350px 50px; rutenett-mal-områder: "h h h h h h h h h h hh" "m m c c c c c c f c f" f f f f f f ;)

Det er liksom visuell representasjon nettstedets rutenett i CSS. Alle karakterene i denne parameteren danner 3 rader og 12 kolonner, definert av linjen ovenfor. Hver bokstav tilsvarer én celle. Navnene i eksemplet tilsvarer blokkene med HTML-kode: topptekst (h), meny (m), innhold (c) og bunntekst (f), men du kan bruke alle andre alternativer.

Tilordne områder maler og eksperimenter

I neste trinn "kobler du logisk sammen" beholdersymbolene og DIV-elementer:

.header ( rutenettområde : h; ) .meny ( rutenettområde : m; ) .innhold ( rutenettområde : c; ) .bunntekst ( rutenettområde : f; )

Topptekst ( rutenettområde: h; ) .meny ( rutenettområde: m; ) .innhold ( rutenettområde: c; ) .bunntekst ( rutenettområde: f; )

Nettstedet vil vise et oppsett som dette:

Og nå begynner magien. La oss bytte noen bokstaver i parameteren rutenett-mal-områder, for eksempel "c" og "m" på steder:

rutenett-mal-områder : "h h h h h h h h h h h h h" "ccccccccccccc m m" "f f f f f f f f f f f f" ;

rutenett-mal-områder: "h h h h h h h h h h h h h" "ccccccccccc c c m m" "f f f f f f f f f f f f f";

Rutenettet vil se annerledes ut:

Å legge til tilpasningsevne til dette designet ser generelt fantastisk ut. Du kunne ikke gjøre dette med HTML alene, men i CSS er alt mulig: ". h h h h h h h h h ." "c c c c c c c c c m m" ". f f f f f f f f f f ." ;

rutenett-mal-områder: ". h h h h h h h h h ." "c c c c c c c c c m m" ". f f f f f f f f f f .";

Nettsiden ser slik ut:

Ingen skript eller HTML - bare magien med CSS Grid!

Ytterligere Grid og Flex eksempler

Senere på CSS-triks fant jeg en annen artikkel om emnet, noen alternativer fra den kan være nyttige for deg. Følg lenkene til (logo i kodeblokken øverst til høyre) for å se eksemplet i aksjon på storskjerm.

Klassisk sideoppsett

Vi har en topp- og bunntekst strukket til hele bredden, og mellom dem er det en innholdsblokk med to sidefelt. I det første tilfellet, når skjermen er redusert, vil alle objekter forbli i samme posisjoner som før.

Hvis du trenger at blokkene skal være plassert under hverandre, så:

2 kolonner bloggrutenett

La oss si at vi har en stor blokk med innhold og en sidefelt i midten. Koden nedenfor holder alle objekter på plass når sidestørrelsen reduseres.

Den andre teknikken er å ordne dem etter hverandre.

Breddefordeling av elementer

Visuelt ligner eksemplet på et galleri, når alle bildene er ved siden av hverandre i flere kolonner. Etter hvert som du reduserer størrelsen, vil færre og færre av dem vises på hver linje.

Bilde inne i artikkelen

Her er innholdet delt i 2 deler, og mellom dem er det en fullskjermblokk.

Total. Generelt oppdaget jeg konseptet CSS Grid, som, for å være ærlig, imponerte meg positivt - spesielt rammene der layoutområder med forskjellige bokstaver ble vurdert. Selvfølgelig er dette bare det grunnleggende om "teknologien", pluss at jeg ikke beskrev i detalj hver parameter i koden. I siste seksjon Eksempelartikler er mer komplekse og bør vurderes nøye. Den kombinerer både Flex og Grid. Hvis dette emnet interessant, abonner på kursene til førsteforfatteren - E-postoppføringer i den opprinnelige første og andre noten.

Har du noe å legge til angående CSS Grid? — skriv tanker, råd eller send interessante lenker.

Jeg la merke til Grids-teknikken for omtrent et år siden. Da virket denne teknikken, etter en veldig overfladisk studie, ubrukelig og veldig eksperimentell for meg, jeg ble frastøtt av det faktum at det for implementeringer var nødvendig å lage ekstra markup. Men nå begynner det å bli vanskelig å ikke legge merke til antall nettsteder som er bygget på rutenettet, samt antall artikler og veiledninger om det. Takket være sistnevnte har det blitt mye lettere å studere og forstå prinsippene og begrepene, og trekke mer eller mindre reelle konklusjoner. Min konklusjon et år senere er: «Det er enkelt og nyttig løsning som noen gang ble laget for utformingen av nettsider, bør enhver webdesigner med respekt for seg selv vite.»

Alle som noen gang har jobbet med et rutenett vet hva et rutenett er. grafiske redaktører (Photoshop, Fyrverkeri, Gimp, etc.) og selvfølgelig verdsatt dets nødvendighet når du lager ethvert design. Men hvordan implementere et Grid på nettet? Faktisk Tabellform layouten var en ekte nettsidedesign med et rutenett, utvilsomt veldig praktisk. Men ikke tiltenkt bruk elementer bord var grusomt.
Heldigvis har den enorme populariteten til nettstandarder vokst og fortsetter å vokse i fjor, så vel som deres støtte i moderne nettlesere, ga oss muligheten til å lage multifunksjonelle sider med svært lite logisk markering. Denne layouten ble kalt Blokkere. Men også Blokkere layout viste seg å være svak side. Når du lager sider med et stort sett med elementer av forskjellige størrelser og betydninger, har det blitt en veldig vanskelig oppgave å merke slike sider, og hvis mer enn én person jobber med markeringen, kan slikt arbeid bli et mareritt.
Og så kom teknikken ved bruk av Grid til unnsetning. Denne teknikken er en hybrid mellom Blokkere Og Tabellform oppsett. Å bruke den gir oss:

• hastighet og enkel utvikling
• posisjoneringsfrihet
• proporsjonaliteten til sideelementer og deres plassering

Prisen for alt dette er bare litt ekstra påslag. Jeg tror i disse dager, når prisen på en persons klokke er mye dyrere enn maskinvare og produktivitet, er det ikke vanskelig å gjette hvilken vei vekten tipper.

Hva er layout med Grid? For det første er det et konsept. Et konsept som inkluderer mange designaspekter og svært få regler for implementeringen. Dette gir full frihet og ingen standardisering i utførelsen. Jeg vil si enda mer - det samme rutenettet kan implementeres av de fleste forskjellige måter. Hvis du allerede har lest om Grid, har du kanskje lagt merke til at hver forfatter starter med ny sideå gå for langt inn i detaljene, det er mildt sagt forvirrende. Heldigvis begynte de å dukke opp Nettsystemer- CSS-biblioteker for arbeid med Grid. Og ved å bruke eksemplet deres kan du veldig raskt mestre grunnleggende prinsipper denne teknikken.

Jeg tror det ikke gir mening å skrive om alle aspekter av Grid, du kan enkelt finne informasjon om det på Internett. Jeg foreslår å lage din egen enkle Rutenettsystem.

Først må du forstå at rutenettet består av kolonner og mellomrom mellom dem. Det er tre hovedverdier - rutenettets bredde, kolonnebredden og bredden på rommet mellom kolonnene. Bredden på kolonnene avhenger av antallet.

La oss prøve å lage et rutenett 950 piksler bredt med 16 kolonner med 10 pikslers avstand, så en kolonne skal være 50 piksler bred. Etter å ha forstått alle verdiene, åpner vi enhver grafisk editor kjent for oss og lager en layout. Du kan også legge til polstring til rutenettet til venstre og høyre, for eksempel 20 piksler hver, og dette vil resultere i en layout med en bredde på 990 piksler. Du kan se mitt eksempel.

Nå kan vi begynne å lage biblioteket vårt. Som de fleste CSS-bibliotekene våre trenger en global tilbakestilling, foreslår jeg at Eric Mayers CSS-tilbakestilling beholder reset.css la oss skape grid.css som vi umiddelbart kan legge til en metode for rengjøring av beholdere som inneholder flytende blokker - Clear Fix. Det første vi trenger er en regel for en beholder som skal inneholde alle kolonnene våre. Bredden på hver beholder er lik bredden på rutenettet vårt.

.container(
margin: 0 auto;
bredde: 950px;
}

Nå kan vi legge til en regel for kolonnene våre, den inneholder bredden og utfyllingen. Innrykk fungerer som et gap (takrenne) mellom kolonnene.

.kolonne(
flyte: venstre;
marg-høyre: 10px;
overløp: skjult;
bredde: 50px;
}

Den siste kolonnen trenger ikke et innrykk for å gjøre dette, la oss legge til en regel for det også:

Våre containere inneholder søyler, søylene er flytende blokker, så de må rengjøres. For å unngå unødvendig .clearfix i markeringen, kan du bruke denne regelen på beholdere:

.clearfix:etter .container:etter{
innhold: ".";
display: blokk;
høyde: 0;
klar: begge;
synlighet: skjult;
}

clearfix, .container(display: inline-block;)

/* Skjuler fra IE-mac \*/
*html.clearfix, *html.beholder(høyde: 1%;)
.clearfix, .container(display: blokk;)
/* Slutt skjul fra IE-mac */

Nå kan vi begynne med spaltene våre. Kolonner kan være to eller tre brede, og så videre. For å gjøre dette kan vi bruke følgende regler på dem:

.span-1 (bredde: 50px;)
.span-2 (bredde: 110px; )
.span-3 (bredde: 170 piksler; )
.span-4 (bredde: 230px; )
.span-5 (bredde: 290px; )
.span-6 (bredde: 350px; )
.span-7 (bredde: 410px; )
.span-8 (bredde: 470 px; )
.span-9 (bredde: 530px; )
.span-10 (bredde: 590px; )
.span-11 (bredde: 650px; )
.span-12 (bredde: 710px; )
.span-13 (bredde: 770 piksler; )
.span-14 (bredde: 830px; )
.span-15 (bredde: 890px; )
.span-16 ( bredde: 950 piksler; margin-høyre: 0; )

I prinsippet er dette alt som trengs for Grid-implementeringer. Du kan også legge til en wrapper og en klasse for å vise Grid med en layout. La oss skape main.css og legg til:

.wrapper(
margin: 0 auto;
bredde: 990px;
}
.overlegg(
bakgrunn: transparent url(overlay.png) gjenta-y bla øverst til venstre;
}

Slik kan oppsettet se ut:

Jeg tror dette er nok til å begynne med.
Du kan se mitt eksempel

Danny Markov

Designet er ganske enkelt - det består av en senterjustert beholder, inne i hvilken vi har en overskrift, en hovedseksjon, sidepanel og en kjeller. Her er de viktigste "testene" vi bør kjøre mens vi holder CSS og HTML så rene som mulig:

1. Plasser fire hoveddeler av oppsettet.
2. Gjør siden responsiv (sidefeltet faller under hovedinnholdet på små skjermer).
3. Juster topptekstinnhold - venstre navigering, høyre knapp.

Som du kan se, for sammenligningens skyld, holdt vi alt så enkelt som mulig. La oss starte med den første testen.

Test 1: Utforming av sideseksjoner

Flexbox-løsning

Legg til display: bøy deg til beholderen og still inn den vertikale retningen til underelementene. Dette plasserer alle seksjonene under hverandre.

Container ( visning: flex; flex-retning: kolonne; )

Nå må vi sørge for at hoveddelen og sidefeltet er plassert ved siden av hverandre. Siden flex-beholdere vanligvis er ensrettet, må vi legge til tilleggselement.

Vi setter deretter dette elementets visning: flex og flex-retning i motsatt retning.

Hoved-og-sidefelt-innpakning (display: flex; flex-retning: rad;)

Det siste trinnet er å angi dimensjonene til hoveddelen og sidefeltet. Vi vil at hovedinnholdet skal være tre ganger bredden på sidefeltet, noe som er enkelt å gjøre med flex eller prosenter.

Som du kan se gjorde Flexbox alt bra, men vi trengte også ganske mange CSS-egenskaper pluss et ekstra HTML-element. La oss se hvordan CSS Grid vil fungere.

CSS Grid-løsning

Det er flere alternativer for å bruke CSS Grid, men vi vil bruke grid-template-areas-syntaksen som den mest passende for våre formål.

Først skal vi definere fire rutenettområder, ett for hver del av siden:

header ( rutenettområde: topptekst; ) .main ( rutenettområde: hoved; ) .sidefelt ( rutenettområde: sidefelt; ) bunntekst ( rutenettområde: bunntekst; )

Nå kan vi sette opp nettet vårt og definere plasseringen av hvert område. Koden kan virke ganske komplisert i begynnelsen, men når du først blir kjent med grid-systemet, blir det lettere å forstå.

Container ( display: grid; /* Definer størrelsen og antall kolonner i rutenettet vårt. fr-enheten fungerer som Flexbox: kolonnene deler opp den tilgjengelige plassen i raden i henhold til verdiene. Vi vil ha to kolonner - den første er tre ganger størrelsen på den andre */ rutenettet-kolonnen: 3fr 1fr. Koble de tidligere laget til steder i rutenettet sidefelt */ grid-template-areas: "header header" hovedsidefelt" "footer footer"; /* Avstanden mellom rutenettceller vil være 60 piksler */ grid-gap: 60px; )

Det er alt! Oppsettet vårt vil nå følge strukturen ovenfor, og vi har satt det opp slik at vi ikke trenger å forholde oss til margin eller polstring.

Test 2. Gjøre siden responsiv

Flexbox-løsning

Dette trinnet er strengt relatert til det forrige. For en Flexbox-løsning må vi endre flex-retningen og justere marginen.

@media (max-width: 600px) ( .main-and-sidebar-wrapper ( flex-direction: column; ) .main ( margin-right: 0; margin-bottom: 60px; ) )

Siden vår er ganske enkel, så det er ikke mye arbeid i mediesøket, men en mer kompleks layout vil kreve mye omarbeid.

CSS Grid-løsning

Siden vi allerede har definert rutenettområder, trenger vi bare å omdefinere rekkefølgen deres i mediespørringen. Vi kan bruke samme høyttaleroppsett.

@media (max-width: 600px) ( .container ( /* Juster rutenettområder for mobil layout */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; ) )

Eller vi kan redefinere hele oppsettet fra bunnen av hvis vi synes denne løsningen er renere.

@media (max-width: 600px) ( .container ( /* Konverter rutenettet til en enkelt-kolonne layout */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" " bunntekst"; ) )

Test 3: Justering av topptekstkomponenter

Flexbox-løsning

Knapp

Vi har allerede gjort en lignende layout med Flexbox i en av våre gamle artikler -. Teknikken er ganske enkel:

Overskrift (visning: flex; justify-content: space-between; )

Navigasjonslisten og knappen er nå riktig justert. Alt som gjenstår er å plassere gjenstandene inni