Sådan opbygges komplekse layouter ved hjælp af CSS

Layout for internettet har altid været begrænset, der har virkelig aldrig været noget virkelig dedikeret til at gøre indhold nemt at vise i et format, der giver mening.

Tilbage i 90'erne, da nettet først tog fat, fandt designere, der var vant til at lægge indhold på et gitter, den eneste måde at få det samme resultat i browseren på, at bruge bordet. Fusionsceller førte til komplekse Website Layouts. , men dette spillede kaos med tilgængelighed og SEO. Hurtig frem og i dag er der alle måder at placere indhold med flyder, fleksible kasser og så videre.

CSS3 har virkelig skubbet webens evner fremad og siden 2014 har der været CSS Grid Layout. . Dette har i øjeblikket 75 procent browser støtte, så det kommer til det punkt, når det er på tide at give det alvorligt overvejende. GROUMS FONDATION 6 RAMME har fået om bord og bruger det til at drive sit gitter.

Denne vejledning vil fokusere på at oprette en magasinstilstand, der viser dig, hvordan du kan perfekt Responsive Web Design Til mellemstore og små skærmstørrelser.

Download vejledningsfilerne her

01. Kom godt i gang

Åbn filen 'GRID1.HTML' fra Start-mappen i Projektfiler . HTML-layoutet for dette har fem div-tags, simpelthen nævnt item1-5 som CSS-klasser. Disse vil være indholdet placeret i nettet. Beholderindpakningen Dette vil definere gitteret, som vil have fire kolonner.

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

02. Kontroller CSS for nettet

Ser i hovedafsnittet Du kan se, at "container" er blevet bedt om at blive lagt ud som et gitter, med auto højde for rækkerne, mens kolonnerne skal indstilles til fire med hvert sæt til 25 procent af browseren . Tjek dette i browseren, og du vil se, at hvert element automatisk tildeles den næste ledige gitterposition.

 .Container {
  Display: Gitter;
  Gitter-skabelon-rækker: Auto;
  Gitter-template-kolonner: Gentag (4, 25%); } 

03. Definer gitterpositioner

Tag nu et kig på 'GRID2.HTML' filen. Det er det samme som den første fil, undtagen 'Item1' og 'Item2' får bestemte positioner. Den første er placeret i række 1 og ender før række 2. Søjlen starter ved 1 og ender ved 3, så den spænder over to søjler. Andet starter i kolonne 3 og tager de næste to kolonner. De resterende elementer fylder de næste tilgængelige gitterspor.

 .item1 {
  GRID-ROW-START: 1;
  Gitter-række ende: 2;
  Gitter-kolonne-start: 1;
  Gitter-kolonne-ende: 3;
}
.item2 {
  GRID-ROW-START: 1;
  Gitter-række ende: 2;
  Gitter-kolonne-start: 3;
  Gitter-kolonne-ende: 5;
} 

04. Brug en gitterskabelon

Åben 'grid3.html' og se på HTML's krop. Du vil se, at der er et layout med et overskrift, sidebjælke, hovedindholdsafsnit og en footer. Du kan tilføje mere tekst til indholdet for at se, hvad der sker, når dette er placeret i. Gitteret vil bruge en skabelonfunktion til at gøre disse sektioner til et layout.

 & lt; div class = "container" & gt;
  & lt; div class = "header" & gt; header & lt; / div & gt;
  & lt; div class = "sidebjælke" & gt; sidebjælke & lt; / div & gt;
  & lt; div class = "indhold" & gt; indhold & lt; / div & gt;
  & lt; div klasse = "footer" & gt; footer & lt; / div & gt;
& lt; / div & gt; 

05. Definer skabelonen

Kig på CSS for beholderen. Det er igen defineret som et gitter. Den øverste række vil være 200px høj, midten bliver auto-størrelse, og den sidste række vil være 100px høj. Kolonnerne er indstillet til at være 33 procent bred og til autofill resten. Skabelonen angiver, at overskriften vil fylde begge kolonner. Næste række vil være sidebjælken i den første kolonne og indholdet i det næste. Footer går på tværs af begge.

 .Container {
  Display: Gitter;
  Gitter-skabelon-rækker: 200px Auto 100px;
  Gitter-template-kolonner: 33% AUTO;
  Gitter-skabelonområder:
  "Header header"
  "Sidebjælkeindhold"
  "Footer footer"; } 

06. Link skabelonen til klassen

For at forbinde klassen til skabelonen definerer koden vist her dette. Hvert gitterområde er navngivet, og linket er oprettet. Indholdet vises ikke her, men det er i 'GRID3.HTML' -dokumentet. Se på dette i browseren for at se layoutet af gitteret. Fordi to kolonner er defineret, har skabelonen brug for to områder i hver af de omvendte kommaer.

 .Header {
  Gitterområde: header;
}
.sidebar {
  Gitterområde: Sidebjælke;
}
.footer {
  Gitterområde: Footer; } 

07. Gør det lydhør

For at gøre 'grid3.html' responsiv, indsættes en medieforespørgsel, og den øverste række opbevares ved 200 procent, mens de resterende rækker automatisk vil blive dimensioneret. Der er kun en kolonne, den fulde bredde, så skabelonen har et ord i hvert inverteret komma for at definere layoutet. Disse kan nemt ombestilles uden at skifte nogen af ​​HTML'en.

 @media skærm og (max bredde: 699px) {
  .Container {
  Display: Gitter;
  Gitter-skabelon-rækker: 200px auto;
  Gitter-template-kolonner: 100%;
  Gitter-skabelonområder: "Header" "Sidebjælke" "" "" "
  }
} 

08. Arbejde på et rigtigt layout

Nu åbner 'index.html' - alle HTML for indholdet er allerede oprettet, ligesom nogle af CSS til designelementerne. Tilføj dette gitter til stilmærkerne i hovedafsnittet. Hvis du gør det, opretter et tre-kolonne gitter med skabelonen for hver sektion. Bemærk fuldstop for de tomme gitterafsnit.

 .Container1 {
  Bredde: 80%;
  Margin: 0 Auto;
  Display: Gitter;
  Gitter-skabelon-rækker: Auto;
  Gitter-template-kolonner: 33,3% 33,3% AUTO;
  Gitter-skabelonområder: "Header Header Header" ". Standsfirst Standsfirst" .. Article1 "" Focus Pullquote Pullquote "" Artikel 2 Artikel2. ";
} 

09. Link op skabelonen

Som med det foregående trin forbinder dette overskriften med skabelonen. Hovedet bliver bedt om at spænde alle tre kolonner af gitteret, så Standfirst er indstillet til at tage to kolonner og have en tom kolonne til venstre. Hvis du tjekker browseren, er kolonnen fyldt, fordi det resterende indhold autofillers det næste ledige rum - det vil dog ikke gøre dette, når det hele er oprettet.

 .Header {
  Gitterområde: header;
}
.standfirst {
  Gitterområde: Standfirst;
} 

10. Tilføj de næste områder

Nu er den første artikel, pull citatet og fokusbilledet placeres i designet. Træk citatet og billedet er side om side på samme række. På dette stadium er artikel2 ikke blevet placeret, så det tager det første ledige rum på gitteret, som er ved siden af ​​Standfirst.

 .Artikel1 {
  Gitterområde: Artikel 1;
}
.pullquote {
  Gitterområde: Pullquote;
}
.fokus {
  Gitterområde: Fokus;
  Tekst-Align: Center; } 

11. Afslut det første net

Tilføjelse af den anden artikels CSS gør det muligt for alt det første gitter at blive placeret korrekt. At se på dette i browseren vil vise, at layoutet fungerer sammen med baggrundsbilledet og skaber den slags layout, der ses i magasiner, hvor designeren arbejder omkring et stort baggrundsbillede.

 .Artikel2 {
    Gitterområde: Artikel 2;
    Kolonne-Gap: 65px;
    Kolonne-tæller: 2;
} 

12. Tilføj en hvid baggrund

Før du starter det andet net, kan du undre dig over, hvorfor der er behov for to net. Årsagen er, at dette gitter skal have en hvid fuld bredde baggrund, så dette CSS vil pakke det andet gitter. Dette er at give denne sektion følelsen af ​​en anden side i designet.

 .whitebg {
    Padding: 100px 0;
    Baggrundsfarve: #DDD;
} 

13. Lav et andet net

Det andet gitter er enklere end det første. Der er tre kolonner, med en automatisk højde på rækkerne. Indholdet vil fylde en kolonne hver, så der er ikke behov for at definere skabelonområderne. Men når tabletdesignet tilføjes, skal dette skifte til to kolonner, så der kræves en reflow, og navnene vil være vigtige.

 .Container2 {
    Bredde: 80%;
    Margin: 0 Auto;
    Display: Gitter;
    Gitter-skabelon-rækker: Auto;
    Gitter-template-kolonner: 33,3% 33,3% AUTO;
    Gitter-skabelonområder: "IMG1 IMG2 Artikel 3";
} 

14. Tilføj kolonnerne

Hver af CSS-klasserne i det andet gitter bliver fortalt at forbinde med den relevante kolonne som defineret i gitterskabelonen. Artikel tekstfarven er ændret for blot at få det til at skille sig ud mod den lettere baggrund i dette afsnit. Med kun fodfoden til at fuldføre, er designet af magasinets layout næsten på plads.

 .img1 {
  Gitterområde: IMG1;
}
.img2 {
    Gitterområde: IMG2;
}
.Article3 {
  Gitterområde: Artikel 3;
  Farve: # 333;
} 

15. Perfekt foden af ​​siden

Afslutning af siden vil placere en fuld bredde Div på tværs af skærmen, som vil blive fyldt med en sort farve, og teksten er lige centreret. Dette fuldender skrivebordsversionen af ​​designet, men flyt skærmen ned under 1200px bredt, og webstedet begynder at bryde.

 .footer {
    Baggrundsfarve: # 000;
    Farve: # 999;
    Tekst-Align: Center;
    Padding: 50px 20px 100px;
} 

16. Juster for medium skærm design

En medieforespørgsel indsættes her for at passe på designet, når browserens bredde er mindre end 1200px. Koden for trin 17 og 18 placeres inde i parenteserne, hvor kommentaren er. Dette vil være tilfældet med at ændre begge gitterets layoutstruktur.

 @media skærm og (max bredde: 1200px) {
  / * kode her * /
} 

17. Reflow det første gitter

Det første gitter er indstillet til nu at fylde den fulde bredde af browseren med kun to kolonner i stedet for tre. Ordren af ​​sektionerne er placeret i skabelonen, med artiklerne skifte sider, da dette passer bedre på baggrundsbilledet på denne skærmstørrelse.

 .Container1 {
  Bredde: 100%;
  Gitter-skabelon-rækker: Auto;
  Gitter-template-kolonner: 50% 50%;
  Gitter-skabelonområder: "Header Header" "Standfirst Standfirst" "Artikel1." "pullquote pullquote" "Article2 Focus";
  }
.Article2 {
  Kolonne-tæller: 1;
  } 

18. Test dit layout

Det andet gitter ændres også for at tage den fulde bredde af browseren og to kolonner tilføjet. Billederne er placeret side om side på rækken over teksten, så den passer fint på displayet. Du kan teste dette layout i browseren ved at ændre størrelsen på din browser under 1200px bredde.

 .Container2 {
  Bredde: 100%;
  Margin: 0 Auto;
  Gitter-skabelon-rækker: Auto;
  Gitter-template-kolonner: 50% 50%;
  Gitter-skabelonområder: "IMG1 IMG2" "Artikel 3 Artikel 3";
} 

19. Tweak Design til mobil

Enhver browser, der har en bredde på mindre end 769px, får den kode, der tilføjes i de sidste trin. Alt, hvad vi skal gøre her, er at sikre, at hvert af netene har et enkelt kolonne layout, så indholdet kan ses ordentligt inden for det mindre rum.

 @media skærm og (max bredde: 768px) {
  / * Endelige trinkode her * /
} 

20. Kontroller enkeltkolonnegitteret

Nu er det første gitter indstillet til en enkelt kolonne på 100 procent af browserens bredde, og rækkefølgen af ​​sektionerne tilføjes i skabelonområderne. Kontroller, hvordan den første del af siden arbejder på mobilskærme.

 .Container1 {
  Bredde: 100%;
  Gitter-skabelon-rækker: Auto;
  Gitter-template-kolonner: 100%;
  Gitter-skabelonområder: "Header" "Standfirst" "Article1" "Pullquote" "Focus" "Article2";
} 

21. Afslut layoutet

Her er det andet gitter også lavet til at fylde en enkelt søjle, og layoutet af sektioner er defineret. Gem nu det færdige design og se det på tværs af forskellige skærmbilleder for at se CSS-gitterets fulde layoutkapacitet og hvor nemt det var at bare ombestille indholdet til forskellige bredder.

 .Container2 {
  Bredde: 100%;
  Margin: 0 Auto;
  Gitter-skabelon-rækker: Auto;
  Gitter-template-kolonner: 100%;
  Gitter-skabelonområder: "IMG1" "IMG2" "Artikel 3";
} 

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Web Designer. Købe Udgave 271. eller abonnere .

Relaterede artikler:

• 5 tips til super-hurtig CSS
• Forståelse af CSS Display Ejendom
• Sådan oprettes et pyramidlayout med CSS-former