Två kolumner

Nu vill jag prova att den tvåkolumniga varianten fungerar som tänkt, vi gör en ny rad och fyller innehåll i en rad som har två kolumner.

HTML-kod för två kolumner

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

HTML-kod för en rad med två kolumner

<section class="row cols2 color3">

  <div class="col">
    <div class="content">
      <h2 id="hittahit">Hitta hit</h2>
    </div>
  </div>

  <div class="col">
    <div class="content">
      <h2>Karta</h2>
    </div>
  </div>

</section>

Du kan se att jag även valt att lägga till ytterligare en div <div class="content"> vilket gör att jag kan styla raden, kolumnen eller texten i respektive kolumn. Ibland är det bra att placera fler omslutande div (eller motsvarande) för att få en bra möjlighet att styla varje element individuellt.

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 två kolumner som innehåller text och bild.

×

Jag lade inte till någon speciell style på .content förutom att justera så att texten började högst upp i varje ruta.

Style så att texten börjar överst

.content {
  align-self: flex-start;
}

Nu är det din tur, gör en rad med två 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.