Hvordan bygge komplekse layouter ved hjelp av CSS

Layout for nettet har alltid vært begrenset, det har aldri vært noe egentlig dedikert til å gjøre innholdet enkelt å vise i et format som gir mening.

Tilbake i 90-tallet når nettet først tok tak i, ble designerne som ble brukt til å legge ut innhold på et rutenett, den eneste måten å få det samme resultatet i nettleseren, var å bruke bordet. Fusjonerende celler førte til kompleks Nettstedslayouts , men dette spilte ødeleggelse med tilgjengelighet og SEO. Raskt fremover og i dag er det alle måter å plassere innhold med flyter, fleksible bokser og så videre.

CSS3 har virkelig presset mulighetene til weben fremover og siden 2014 har det vært CSS GRID Layout . Dette har for tiden 75 prosent nettleserstøtte, så det kommer til det punktet når det er på tide å gi det alvorlig hensyn. Zurbs fundament 6 rammer har kommet ombord og bruker det for å drive sitt rutenett.

Denne opplæringen vil fokusere på å skape en magasin-stil som vil vise deg hvordan du skal perfeksjonere Responsivt webdesign for mellomstore og små skjermstørrelser.

Last ned opplæringsfilene her

01. Kom i gang

Åpne filen 'grid1.html' fra startmappen i Prosjektfiler . HTML-layoutet for dette har fem div-koder, bare kalt Item1-5 som CSS-klasser. Disse vil være innholdet plassert i rutenettet. Beholderinnpakningen Dette vil definere rutenettet, som vil ha fire kolonner.

 & lt; div class = "container" & gt;
  & lt; div class = "item1" & gt; element 1 & lt; / div & gt;
  & lt; div class = "item2" & gt; element 2 & lt; / div & gt;
  & lt; div class = "item3" & gt; element 3 & lt; / div & gt;
  & lt; div class = "item4" & gt; element 4 & lt; / div & gt;
  & lt; div class = "item5" & gt; element 5 & lt; / div & gt;
& lt; / div & gt; 

02. Kontroller CSS for rutenettet

Ser i hodeseksjonen Du kan se at "beholderen" har blitt fortalt å bli lagt ut som et rutenett, med autohøyde for rader, mens kolonnene skal settes til fire med hvert sett til 25 prosent av nettleseren . Sjekk dette i nettleseren, og du vil se at hvert element automatisk tildeles neste tilgjengelige rutenett.

 .Container {
  Vis: GRID;
  Grid-mal-rader: Auto;
  Grid-template-kolonner: Gjenta (4, 25%); } 

03. Definer rutenett posisjoner

Ta en titt på "grid2.html" -filen. Det er det samme som den første filen, unntatt 'item1' og 'item2' er gitt bestemte stillinger. Den første er plassert i rad 1 og slutter før rad 2. Kolonnen starter ved 1 og slutter ved 3 slik at den spenner over to kolonner. Den andre starter ved kolonne 3 og tar de neste to kolonnene. De gjenværende elementene fyller de neste tilgjengelige rutenettsporene.

 .item1 {
  Grid-Row-Start: 1;
  Grid-row-end: 2;
  Grid-Column-Start: 1;
  Grid-kolonne-enden: 3;
}
.item2 {
  Grid-Row-Start: 1;
  Grid-row-end: 2;
  Grid-Column-Start: 3;
  Grid-kolonne-enden: 5;
} 

04. Bruk en rutenettmal

Åpne 'Grid3.html' og se på HTMLs kropp. Du ser at det er et layout med en header, sidebjelke, hovedinnholdsseksjon og en bunntekst. Du kan legge til mer tekst i innholdet for å se hva som skjer når dette er plassert i. Gitteret vil bruke en malfunksjon for å gjøre disse seksjonene i et layout.

 & lt; div class = "container" & gt;
  & lt; div class = "header" & gt; header & lt; / div & gt;
  & lt; div class = "sidebar" & gt; sidebar & lt; / div & gt;
  & lt; div class = "innhold" & gt; content & lt; / div & gt;
  & lt; div klasse = "footer" & gt; footer & lt; / div & gt;
& lt; / div & gt; 

05. Definer malen

Se på CSS for beholderen. Det er igjen definert som et rutenett. Den øverste raden vil bli 200px høy, midten vil bli automatisk størrelse og den siste raden vil være 100px høy. Kolonnene er satt til å være 33 prosent brede og til AutoFill resten. Malen sier at overskriften vil fylle begge kolonnene. Neste rad vil være sidefeltet i den første kolonnen og innholdet i det neste. Footeren går over begge deler.

 .Container {
  Vis: GRID;
  Grid-mal-rader: 200px auto 100px;
  Grid-template-kolonner: 33% Auto;
  Grid-template-områder:
  "Header header"
  "Sidebar innhold"
  "footer footer"; } 

06. Link malen til klassen

For å koble til klassen til malen, definerer koden som vises her. Hvert rutenett er oppkalt og lenken er opprettet. Innholdet er ikke vist her, men det er i "grid3.html" -dokumentet. Se på dette i nettleseren for å se utformingen av rutenettet. Fordi to kolonner er definert, trenger malen to områder i hver av de inverterte kommaene.

 .Header {
  Grid-område: Header;
}
.sidebar {
  Gitterområde: Sidebjelk;
}
.foter {
  Gitterområde: Footer; } 

07. Gjør det lydhør

For å gjøre 'GRID3.HTML' lydhør, er en medieforespørsel satt inn og den øverste raden holdes på 200 prosent, mens de resterende radene automatisk vil bli dimensjonert. Det er bare en kolonne, hele bredden, så malen har ett ord i hvert invertert komma for å definere layoutet. Disse kan enkelt ombestemmes uten å skifte noen av HTML.

 @media skjerm og (maks bredde: 699px) {
  .Container {
  Vis: GRID;
  Grid-mal-rader: 200px auto;
  Grid-template-kolonner: 100%;
  Grid-template-områder: "Header" "Sidebar" "Innhold" "bunntekst";
  }
} 

08. Arbeid på en ekte layout

Nå åpne 'index.html' - alle HTML for innholdet er allerede opprettet, som har noen av CSS for designelementene. Legg til dette rutenettet i stiletikettene i hodet. Å gjøre det skaper et tre-kolonne rutenett med malen for hver seksjon. Legg merke til hele stoppet for de tomme gridseksjonene.

 .Container1 {
  Bredde: 80%;
  margin: 0 auto;
  Vis: GRID;
  Grid-mal-rader: Auto;
  Grid-template-kolonner: 33,3% 33,3% Auto;
  GRID-mal-områder: "Header Header Header" ". STANDFIRST STANDFIRST" "..
} 

09. Link opp malen

Som med det forrige trinnet, kobler dette overskriften med malen. Overskriften fortelles å spanne alle tre kolonnene i rutenettet, så er standfirst settet til å ta to kolonner og ha en tom kolonne til venstre. Hvis du sjekker nettleseren, er den kolonnen fylt fordi det gjenværende innholdet autofyller neste ledige plass - det vil ikke gjøre dette når det er satt opp, men.

 .Header {
  Grid-område: Header;
}
.Stonfirst {
  Grid-området: standfirst;
} 

10. Legg til de neste områdene

Nå den første artikkelen, pull sitatet og fokusbildet er plassert i designet. Pull sitat og bilde er side om side på samme rad. På dette stadiet har ikke artikkel2 ikke blitt plassert, så det tar det første ledige rommet på rutenettet som ligger ved siden av standfirst.

 .Article1 {
  Gitterområde: Artikkel1;
}
.pullquote {
  Rutenettsted: Pullquote;
}
.fokus {
  Gitterområde: Fokus;
  Tekstjustering: Senter; } 

11. Fullfør det første rutenettet

Legge til den andre artikkelenes CSS gjør det mulig for alt det første rutenettet som skal plasseres riktig. Ser på dette i nettleseren, viser at layoutet fungerer med bakgrunnsbildet og skaper den slags layout sett i magasiner, hvor designeren fungerer rundt et stort bakgrunnsbilde.

 .Article2 {
    Gitterområde: Artikkel2;
    kolonne-gap: 65px;
    Kolonne-telling: 2;
} 

12. Legg til en hvit bakgrunn

Før du starter det andre rutenettet, kan du lure på hvorfor det er behov for to grids. Årsaken er at dette rutenettet skal ha en hvit full bredde bakgrunn, slik at denne CSS vil vikle det andre rutenettet. Dette er å gi denne delen følelsen av en andre side i designet.

 .whitebg {
    Padding: 100px 0;
    Bakgrunnsfarge: #ddd;
} 

13. Lag et andre rutenett

Det andre rutenettet er enklere enn den første. Det er tre kolonner, med en automatisk høyde på radene. Innholdet skal fylle en kolonne hver, så det er ikke nødvendig å definere malområdene. Men når tablettdesignet er lagt til, må dette også bytte til to kolonner, slik at en reflow er nødvendig, og navnene vil være viktige.

 .container2 {
    Bredde: 80%;
    margin: 0 auto;
    Vis: GRID;
    Grid-mal-rader: Auto;
    Grid-template-kolonner: 33,3% 33,3% Auto;
    Grid-template-områder: "IMG1 IMG2 Artikkel3";
} 

14. Legg til kolonnene

Hver av CSS-klassene i det andre rutenettet blir fortalt å koble opp med den aktuelle kolonnen, som definert i nettmalen. Artikkeltekstfargen endres bare for å få den til å skille seg ut mot den lettere bakgrunnen til denne delen. Med bare bunnteksten å fullføre, er utformingen av magasin-stilen layout nesten på plass.

 .img1 {
  Gitterområde: IMG1;
}
.img2 {
    Rutenettsted: IMG2;
}
.Article3 {
  Gitterområde: Artikkel3;
  Farge: # 333;
} 

15. Perfekt foten på siden

Etterbehandling av siden vil plassere en full bredde div over skjermen, som vil bli fylt med en svart farge og teksten er bare sentrert. Dette fullfører skrivebordsversjonen av designet, men flytter skjermen ned under 1200px bredt og nettstedet begynner å bryte.

 .footer {
    bakgrunnsfarge: # 000;
    Farge: # 999;
    Tekstjustering: Senter;
    polstring: 50px 20px 100px;
} 

16. Juster for middels skjermdesign

En medieforespørsel er satt inn her for å ta vare på designet når bredden på nettleseren er mindre enn 1200px. Koden for trinn 17 og 18 vil bli plassert inne i parentesene der kommentaren er. Dette vil være et tilfelle for å endre både gridens layoutstruktur.

 @media skjerm og (maks bredde: 1200px) {
  / * KODE HER * /
} 

17. Reflow det første rutenettet

Det første rutenettet er satt til å fylle nettleserenes full bredde med bare to kolonner i stedet for tre. Bestillingen av seksjonene er plassert i malen, med artiklene som bytter sider, siden dette passer bedre med bakgrunnsbildet på denne skjermstørrelsen.

 .Container1 {
  Bredde: 100%;
  Grid-mal-rader: Auto;
  Grid-template-kolonner: 50% 50%;
  Grid-template-områder: "Header header" "standfirst standfirst" "Article1." "Pullquote Pullquote" "Artictic2 Focus";
  }
.Article2 {
  Kolonne-telling: 1;
  } 

18. Test ditt layout

Det andre rutenettet er også endret for å ta hele bredden på nettleseren og to kolonnene tilsatt. Bildene er plassert side om side på rad over teksten, slik at den passer pent på skjermen. Du kan teste denne layoutet i nettleseren ved å endre størrelsen på nettleseren din under 1200px bredde.

 .container2 {
  Bredde: 100%;
  margin: 0 auto;
  Grid-mal-rader: Auto;
  Grid-template-kolonner: 50% 50%;
  Grid-mal-områder: "IMG1 IMG2" "Artikkel3 Artikkel3";
} 

19. Tweak Design for Mobile

En hvilken som helst nettleser som har en bredde på mindre enn 769px, vil få koden som legges til i de siste trinnene. Alt vi trenger å gjøre her, er å sikre at hver av rutenene har en enkelt kolonneoppsett slik at innholdet kan ses på riktig måte innenfor det mindre rommet.

 @media skjerm og (maks bredde: 768px) {
  / * Endelig skrittkode her * /
} 

20. Kontroller enkeltkolonnetruten

Nå er det første rutenettet satt til en enkelt kolonne på 100 prosent av nettleserens bredde, og rekkefølgen på seksjonene er lagt til i malområdene. Sjekk for å se hvordan den første delen av siden jobber med mobile skjermer.

 .Container1 {
  Bredde: 100%;
  Grid-mal-rader: Auto;
  Grid-template-kolonner: 100%;
  Grid-template-områder: "Header" "Standfirst" "Artikkel1" "Pullquote" "Focus" "Article2";
} 

21. Fullfør oppsettet

Her er det andre rutenettet også laget for å fylle en enkelt kolonne og utformingen av seksjoner er definert. Lag nå den ferdige designen og se den på tvers av forskjellige-store skjermer for å se hele layoutfunksjonen til CSS-rutenettet og hvor lett det var å bare ombestille innholdet for forskjellige bredder.

 .container2 {
  Bredde: 100%;
  margin: 0 auto;
  Grid-mal-rader: Auto;
  Grid-template-kolonner: 100%;
  grid-mal-områder: "img1" "img2" "artikkel3";
} 

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine webdesigner. Kjøpe utgave 271. eller abonnere .

Relaterte artikler:

• 5 tips for super-rask CSS
• Forstå CSS-displayegenskapen
• Hvordan lage en Pyramid Layout med CSS-former