Tre kolumner

I min One-page vill jag kunna växla mellan 1, 2 och 3 kolumners layout och jag vill växlas färger för varje rad. Tanken är att användaren får hela webbplatsens innehåll genom att skrolla länger och längre ned i webbplatsen.

Nu är det dags att prova hur den trekolumniga varianten kan se ut.

HTML-kod för tre kolumner

Vi lägger till följande struktur inuti wrappern. Denna gången är det en ny rad med tre kolumner.

HTML-kod för en rad med tre kolumner

<section class="row cols3 color1 rounded">

  <div class="col color3">
    <div class="content">
      <h2>Fiskekort</h2>
    </div>
  </div>

  <div class="col color3">
    <div class="content">
      <h2>Betala fiskekort och båthyra</h2>
    </div>
  </div>

  <div class="col color3">
    <div class="content">
      <h2>Tillsyn och kontroll</h2>
    </div>
  </div>

</section>

Nytt för denna varianten är att jag lade till klassen .rounded på raden så att jag kan styla att alla kolumner får rundade hör med border-radius.

Jag kunde valt att placera klassen på varje kolumn, men här valde jag att lägga den enbart på row-elmentet.

Regeln i CSS kan se ut så här.

Runda hörn på kolumnerna

.row.rounded .col {
  border-radius: 1rem;
}

Jag vill gärna att texten inuti min .content har ett litet utrymme av “white-space”, vitt utrymme, till kanten av själva kolumnen. Det löser vi med padding.

Lägg padding på .content

.content {
  padding: 1rem;
}

När jag har fyllt på med innehåll i de båda kolumnerna, och lagt till ytterligare style, så ser det ut så här för mig.

Bild: En rad med tre kolumner som innehåller text.

×

Nu är det din tur, gör en rad med tre kolumner och fyll på med innehåll i form av text (och bild). Du kan justera innehållet så det passar temat för din webbplats.