Hur man bygger komplexa layouter med CSS

Layout för webben har alltid varit begränsad, det har verkligen aldrig varit något som verkligen är dedikerat till att göra innehåll lätt att visa i ett format som är meningsfullt.

Tillbaka i 90-talet när webben först tog håll, fann designers som användes för att lägga ut innehåll på ett rutnät, det enda sättet att få samma resultat i webbläsaren var att använda bordet. Sammanslagna celler ledde till komplexa Webbplatslayouter , men det spelade Havoc med tillgänglighet och SEO. Snabbspolning och idag finns det alla sätt att placera innehåll med flottor, flexibla lådor och så vidare.

CSS3 har verkligen tryckt på nätets förmåga och sedan 2014 har det varit CSS Grid Layout . Detta har för närvarande 75 procent webbläsarstöd, så det kommer till den punkten när det är dags att ge det allvarligt. Zurbs Foundation 6 ram Har kommit ombord och använder det för att driva sitt nät.

Denna handledning kommer att fokusera på att skapa en magasin-stilfunktion som visar dig hur man är perfekt Responsiv webbdesign för medelstora och små skärmstorlekar.

Ladda ner de handledningsfilerna här

01. Kom igång

Öppna filen 'Grid1.html' från startmappen i Projektfiler . HTML-layouten för detta har fem div-taggar, som helt enkelt heter Artikel1-5 som CSS-klasser. Dessa kommer att vara innehållet placerat i rutnätet. Containerförpackningen Detta kommer att definiera rutnätet, som kommer att ha fyra kolumner.

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

02. Kontrollera CSS för rutnätet

Ser i huvuddelen kan du se att "behållaren" har blivit tillsagd att läggas ut som ett rutnät, med automatisk höjd för raderna, medan kolumnerna ska ställas in på fyra med varje uppsättning till 25 procent av webbläsaren . Kolla in det här i webbläsaren och du kommer att se att varje objekt automatiskt tilldelas nästa tillgängliga rutnät.

 .Container {
  Visa: Grid;
  Grid-mall-rader: Auto;
  Grid-mall-kolumner: upprepa (4, 25%); } 

03. Definiera rutnätpositioner

Ta nu en titt på filen 'Grid2.html'. Det är detsamma som den första filen, förutom 'item1' och 'item2' ges specifika positioner. Den första är placerad i rad 1 och slutar före rad 2. Kolonnen startar vid 1 och slutar vid 3 så det spänner över två kolumner. Den andra startar i kolumn 3 och tar de två följande kolumnerna. De återstående objekten fyller de nästa tillgängliga rutorna.

 .Item1 {
  Grid-rad-start: 1;
  Grid-rad-end: 2;
  Grid-kolumn-start: 1;
  Grid-kolumn-end: 3;
}
.Item2 {
  Grid-rad-start: 1;
  Grid-rad-end: 2;
  Grid-kolumn-start: 3;
  Grid-kolumn-end: 5;
} 

04. Använd en rutnätmall

Öppna "Grid3.html" och titta på HTMLs kropp. Du får se att det finns en layout med en rubrik, sidofält, huvudinnehåll och en sidfot. Du kan lägga till mer text i innehållet för att se vad som händer när det är placerat i. Gridan kommer att använda en mallfunktion för att göra dessa avsnitt i en 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 = "content" & gt; content & lt; / div & gt;
  & lt; div class = "footer" & gt; footer & lt; / div & gt;
& lt; / div & gt; 

05. Definiera mallen

Titta på CSS för behållaren. Det definieras igen som ett rutnät. Den övre raden kommer att vara 200px hög, mitten kommer att vara automatisk storlek och den sista raden blir 100px hög. Kolumnerna är inställda på 33 procent breda och för att autofyllera resten. Mallen anger rubriken fyller båda kolumnerna. Nästa rad kommer att vara sidofältet i den första kolumnen och innehållet i nästa. Footer går över båda.

 .Container {
  Visa: Grid;
  Grid-mall-rader: 200px Auto 100px;
  Grid-mall-kolumner: 33% Auto;
  Grid-mall-områden:
  "Header header"
  "SIDEBAR INNEHÅLL"
  "Footer Footer"; } 

06. Länk mallen till klassen

För att koppla upp klassen till mallen definierar koden som visas här. Varje gallerområde är uppkallat och länken skapas. Innehållet visas inte här, men det är i dokumentet "grid3.html". Titta på det här i webbläsaren för att se galleriets layout. Eftersom två kolumner definieras behöver mallen två områden i var och en av de inverterade kommatecken.

 .Header {
  Gridområde: Header;
}
.sidebar {
  Gridområde: sidofält;
}
.footer {
  Gridområde: Footer; } 

07. Gör det mottagligt

För att göra "grid3.html" reagerande sätts en mediefråga och den övre raden hålls vid 200 procent, medan de återstående raderna automatiskt kommer att storlekas. Det finns bara en kolumn, den fulla bredden, så mallen har ett ord i varje inverterat kommatecken för att definiera layouten. Dessa kan enkelt omordnas utan att skifta någon av HTML.

 @media skärm och (max-bredd: 699px) {
  .behållare {
  Visa: Grid;
  Grid-mall-rader: 200px Auto;
  Grid-mall-kolumner: 100%;
  Grid-mall-områden: "Header" "sidobar" "innehåll" "footer";
  }
} 

08. Arbeta på en riktig layout

Nu öppnar "index.html" - Allt HTML för innehållet har redan skapats, liksom några av CSS för designelementen. Lägg till det här rutnätet i stilkodarna i huvudavsnittet. Om du gör det skapar ett tre-kolonnät med mallen för varje sektion. Notera fullstoppet för de tomma galleravsnitten.

 .Container1 {
  Bredd: 80%;
  Marginal: 0 Auto;
  Visa: Grid;
  Grid-mall-rader: Auto;
  Grid-mall-kolumner: 33,3% 33,3% Auto;
  Grid-mall-områden: "Header header header" ". Standfirst standfirst"... Artikel1 "Focus Pullquote Pullquote" "Artikel2 Artikel2.";
} 

09. Länk upp mallen

Som med föregående steg kopplar detta huvudet med mallen. Huvudet berättas att spänna över alla tre kolumner i rutnätet, då är standfirst inställd för att ta två kolumner och ha en tom kolumn till vänster. Om du kontrollerar webbläsaren fylls den kolumnen eftersom det återstående innehållet autofyller nästa lediga utrymme - det kommer inte att göra det när det är allt.

 .Header {
  Gridområde: Header;
}
.standfirst {
  Gridområde: Standfirst;
} 

10. Lägg till nästa områden

Nu är den första artikeln, dragkvoten och fokusbilden placeras i designen. Dragkvot och bilden är sida vid sida på samma rad. I detta skede har artikel2 inte placerats så det tar det första tillgängliga utrymmet på gallret som ligger bredvid standfirst.

 .Artikel1 {
  Gridområde: Artikel1;
}
.pullquote {
  Gridområde: Pullquote;
}
.Focus {
  Gridområde: Fokus;
  Text-Justera: Center; } 

11. Avsluta det första rutnätet

Att lägga till den andra artikelns CSS gör det möjligt för alla det första rutnätet att placeras korrekt. Titta på det här i webbläsaren visar att layouten fungerar med bakgrundsbilden och skapar den typ av layout som ses i tidskrifter, där designern arbetar runt en stor bakgrundsbild.

 .Artikel2 {
    Gridområde: Artikel2;
    Kolumn-Gap: 65px;
    Kolumnantal: 2;
} 

12. Lägg till en vit bakgrund

Innan du börjar det andra rutnätet kanske du undrar varför det finns ett behov av två nät. Anledningen är att detta rutnät kommer att ha en vit fullbredd bakgrund så att denna CSS kommer att fälla det andra rutnätet. Detta är att ge detta avsnitt känslan av en andra sida i designen.

 .Whitebg {
    Padding: 100px 0;
    Bakgrundsfärg: #ddd;
} 

13. Gör ett andra rutnät

Det andra rutnätet är enklare än det första. Det finns tre kolumner, med en automatisk höjd på raderna. Innehållet kommer att fylla i en kolumn var och det är inte nödvändigt att definiera mallområdena. Men när tablettdesignen läggs till, måste detta byta till två kolumner, så en reflow krävs och namnen är viktiga.

 .Container2 {
    Bredd: 80%;
    Marginal: 0 Auto;
    Visa: Grid;
    Grid-mall-rader: Auto;
    Grid-mall-kolumner: 33,3% 33,3% Auto;
    Gridmall-områden: "IMG1 IMG2 Artikel3";
} 

14. Lägg till kolumnerna

Var och en av CSS-klasserna i det andra gallret berättas att koppla upp med den relevanta kolumnen, enligt definitionen i rutnätet. Artikeltextfärgen ändras bara för att den ska stå ut mot den lättare bakgrunden i det här avsnittet. Med bara sidfoten att slutföra är utformningen av magasin-stil layout nästan på plats.

 .Img1 {
  Gridområde: IMG1;
}
.img2 {
    Gridområde: IMG2;
}
.artikel3 {
  Gridområde: Artikel 3;
  Färg: # 333;
} 

15. Perfekt foten på sidan

Avsluta sidan kommer att placera en fullbredd Div över skärmen, som fylls med en svart färg och texten är bara centrerad. Detta kompletterar skrivbordsversionen av designen, men flytta skärmen ner under 1200px bred och webbplatsen börjar bryta.

 .Footer {
    Bakgrundsfärg: # 000;
    Färg: # 999;
    Text-Justera: Center;
    Padding: 50px 20px 100px;
} 

16. Justera för mediumskärmsdesign

En mediefråga sätts in här för att ta hand om designen när webbläsarens bredd är mindre än 1200px. Koden för steg 17 och 18 kommer att placeras inuti fästena där kommentaren är. Detta kommer att vara ett fall att byta båda gallernas layoutstruktur.

 @media skärm och (max-bredd: 1200px) {
  / * Kod här * /
} 

17. Reflow det första rutnätet

Det första rutnätet är inställt för att nu fylla den fullständiga bredden på webbläsaren med bara två kolumner istället för tre. Ordningen av sektionerna placeras i mallen, med artiklarna byta sidor, eftersom det passar bättre med bakgrundsbilden vid den här skärmstorleken.

 .Container1 {
  Bredd: 100%;
  Grid-mall-rader: Auto;
  Grid-mall-kolumner: 50% 50%;
  Grid-mall-områden: "Header header" "standfirst standfirst" "artikel 1". "Pullquote Pullquote" "Artikel2 Fokus";
  }
.artikel2 {
  Kolumnantal: 1;
  } 

18. Testa din layout

Det andra rutnätet är också ändrat för att ta den fullständiga bredden av webbläsaren och två kolumner tillsatt. Bilderna placeras sida vid sida på raden ovanför texten så att den passar snyggt på displayen. Du kan testa den här layouten i webbläsaren genom att ändra storlek på webbläsaren under 1500PX-bredd.

 .Container2 {
  Bredd: 100%;
  Marginal: 0 Auto;
  Grid-mall-rader: Auto;
  Grid-mall-kolumner: 50% 50%;
  Grid-mall-områden: "IMG1 IMG2" "Artikel3 Artikel 3";
} 

19. Tweak design för mobil

Varje webbläsare som har en bredd på mindre än 769px får den koden som läggs till i de sista stegen. Allt vi behöver göra här är att var och en av gallret har en enda kolumnlayout så att innehållet kan ses ordentligt inom det mindre utrymmet.

 @media skärm och (max-bredd: 768px) {
  / * Slutlig stegskod här * /
} 

20. Kontrollera enkelkolumnät

Nu är det första nätet inställt på en enda kolumn med 100 procent av webbläsarens bredd och sektionernas ordning läggs till i mallområdena. Kontrollera hur den första delen av sidan fungerar på mobila skärmar.

 .Container1 {
  Bredd: 100%;
  Grid-mall-rader: Auto;
  Grid-mall-kolumner: 100%;
  Gridmall-områden: "Header" "Standfirst" "Artikel1" "Pullquote" "Focus" "Artikel2";
} 

21. Avsluta layouten

Här är det andra rutnätet också gjort för att fylla en enda kolumn och layouten av sektioner definieras. Spara nu den färdiga designen och visa den över olika storleksskärmar för att se den fullständiga layoutfunktionen hos CSS Grid och hur lätt det var att bara omordna innehållet för olika bredder.

 .Container2 {
  Bredd: 100%;
  Marginal: 0 Auto;
  Grid-mall-rader: Auto;
  Grid-mall-kolumner: 100%;
  Gridmall-områden: "IMG1" IMG2 "" Artikel 3 ";
} 

Denna artikel publicerades ursprungligen i Creative Web Design Magazine Web Designer. köpa Utgåva 271 eller prenumerera .

Relaterade artiklar:

• 5 tips för super-snabb CSS
• Förstå CSS-skärmens egendom
• Hur man skapar en pyramidlayout med CSS-former