Två kolumner med scroll

I förra artikeln lade vi till en möjlighet att wrappa innehållet om det var mer innehåll än det tänkta antalet kolumner. En annan variant är att låta användaren skrolla horisontellt för att se innehållet. En sådan stil kan användas bland annat om man har mycket innehåll, tex bilder eller nyhetet, som man vill visa upp, men innehållet är kanske inte så viktigt att man vill ta upp stor plats i webbsidan.

Att skrolla horisontellt gör det aningen jobbigare för användaren att komma åt innehållet, men samtidigt får vi möjligheten att fylla på mer innehåll utan att påverka sidans huvudsakliga layout.

Tanken är, som vi sagt, att ha en flexibel layout så att vi kan fokusera på att välja innehåll till webbplatsen.

HTML-kod för två kolumner som scrollas

Till denna övningen använder jag samma HTML-kod som när vi gjorde wrap, med en liten skillnad.

HTML-kod för två kolumner med 4 enheter, scrollbart

<section class="row cols2 color1 rounded wrap">
<section class="row cols2 color1 rounded scroll">

  <div class="col color3">
    <div class="content">
      <h2>Gädda</h2>
    </div>
  </div>

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

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

  <div class="col color3">
    <div class="content">
      <h2>Mört</h2>
    </div>
  </div>

</section>

Tanken är att det skall se ut så här, allt innehåll är på en rad och man kan använda en horisontell skrollbar för att se mer innehåll.

Bild: Det är så här vi vill visa upp innehållet, man får skrolla för att se mer.

×

Det enda som skiljer i HTML-koden är att vi byter ut wrap mot scroll. Låt se hur CSS-koden kan uppdateras.

Style för att hantera en skrollande rad med kolumner

.scroll {
  overflow-x: auto;
}

.scroll .col {
  min-width: 45%;
}

De här reglerna gör att en sektion med klassen .scroll kan skrollas horisontellt om innehållet är bredare än sektionen, tack vare overflow-x: auto. Inuti sektionen får alla kolumner med klassen .col en minsta bredd på 45 % av behållarens bredd. Det innebär att flera kolumner placeras i rad, men bara så många som får plats visas samtidigt, och resten kan nås genom att skrolla i sidled.

Jag valde att göra min-width lite mindre än 50%, så man kunde ana att det fanns mer innehåll om man bara skrollade.

Nu är det din tur, gör så att du kan få ett liknande innehåll i din webbsida, där 4 kolumner kan skrollas över en rad, inuti en sektion.