Skip to content
Kursen webtec

Mall för sida med 3 kolumner

Nu har vi sett hur vi kan bygga en responsiv webbplats där rader innehåller kolumner som stackas när bredden blir för smal. Nu kan vi använda det för att fokusera på sidans huvudsakliga innehåll där vi har main och aside. Hur kan vi bygga en layout med 2 eller 3 kolumner med main och aside som också är responsiv?

En ny mall med main och aside

Vi börjar med att skapa en ny HTML-mall som har main och aside. Vi skapar en ny fil public/responsive-3col.html med följande innehåll.

Mall för sida med 3 kolumner med main och aside
<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsiv layout, 3 kolumner</title>
  <link rel="stylesheet" href="css/responsive-3cols.css" />
</head>
<body>
  <header>
    <h1>Responsiv sida med 3 kolumner main & aside</h1>
    <p>Exempel hur main och aside kan kombineras för en responsiv layout med en, två och tre kolumner.</p>
  </header>


  <div class="container">


    <section class="row cols-1">
      <main class="main">Enbart main</main>
    </section>


    <section class="row cols-2">
      <aside class="aside left">Aside left</aside>
      <main class="main">Main</main>
    </section>


    <section class="row cols-2">
      <main class="main">Main</main>
      <aside class="aside right">Aside right</aside>
    </section>


    <section class="row cols-3">
      <aside class="aside left">Aside left</aside>
      <main class="main">Main</main>
      <aside class="aside right">Aside right</aside>
    </section>


  </div>


</body>
</html>

Skillnaden i denna koden är att vi använder elementen main och aside för att markera sidans huvudinnehåll och sidoinnehåll. Vi har också lagt till klasserna left och right på asides för att kunna styla dem olika.

För att exemplet skall fungera så har vi wrappat alla rader i section med klassen row och samtliga rader är wrappade i en container med klassen container. Detta ger oss möjlighet att styla hela innehållet med en maxbredd och centrera det på sidan.

Mall för CSS

Vi skapar en ny CSS-fil public/css/responsive-3cols.css med följande innehåll.

CSS för sida med 3 kolumner med main och aside
/**
 * Responsive layout using flexbox with main and aside
 */


/* Basic page styling */
body {
  margin: 0;
  font-family: sans-serif;
}


/* Header styling */
header {
  background: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}


/* Main content area */
.container {
  padding: 1rem;
}


/* Row layout using flexbox */
.row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}


/* Block styling */
.main, .aside {
  background: #eee;
  padding: 1rem;
  text-align: center;
  border-radius: 5px;
}


/* Background colors for blocks */
/* Background colors for blocks */
.main  { background-color: #D9F0FF; }
.aside { background-color: #D9FFD9; }
.aside.right { background-color: #FFD9D9; }

När du är klar kan din sida se ut så här.

Image description
Bild: Responsiv sida med 3 kolumner med main och aside.

Sidan är ännu inte speciellt responsiv och vi behöver strukturera upp elementen så att de har en viss bredd. Låt oss göra det.