Två kolumner med wrap
Ibland vill jag ha mer flexibilitet i en rad än att bar placera 1, 2 eller 3 kolumner. Säg att jag vill placera 4 enheter i en tvåkolumning layout, men jag will att det hamnar på två rader, om det är fler kolumner än tänkt så skall de wrappas. En sådan flexibilitet vill jag att min layout skall kunna ha.
Tanken är att ha en flexibel layout så att jag kan fokusera på att välja innehåll till webbplatsen.
HTML-kod för två kolumner och “fyra” kolumner
Vi lägger till följande struktur inuti wrappern. Tanken är att använda tvåkolumners layouten, men eftersom det är 4 enheter så vill jag se att sektionen får två rader med två kolumner.
<section class="row cols2 color3 rounded">
<div class="col color1"> <div class="content"> <h2>Gädda</h2> </div> </div>
<div class="col color1"> <div class="content"> <h2>Aborre</h2> </div> </div>
<div class="col color1"> <div class="content"> <h2>Sutare</h2> </div> </div>
<div class="col color1"> <div class="content"> <h2>Mört</h2> </div> </div>
</section>Nu blir det spännande att se om min egen style klarar av detta, så att layouten blir den önskade.
(När du själv testar så kan du få ett annat resultat än det jag visar då du har en annan stylesheet.)
Så här blev min första variant när jag laddade om sidan.
Nåväl, det blev snyggt, men inte riktigt vad jag hade tänkt mig eftersom i detta fallet så ville jag att kolumnera skulle wrappa till två rader.
I detta fallet är “wrap” nyckelordet, eller flex-wrap: wrap. Frågan är hur jag skall lägga till regeln. Jag har två alternativ.
Först så lägger jag till regeln på .row så att wrap gäller för alla rader.
.row { display: flex; gap: 1rem; padding: 1rem; flex-wrap: wrap;}När jag testar så får jag följande utseende.
Det var inte så jag ville ha det, nu blev det likt en enkolumners layout. Jag gissar att det har något med storleken att göra på kolumnerna, dels storleken och kanske även om jag tillåter att kolumnerna skall grow/shrink.
Jag börjar med att misstänka bredden. Jag har ju en gap: 1rem som om jag justerar storleken att ta hänsyn även till gap så kanske det blir bättre.
Jag ändrar stylen för kolumnens .col2 storlek, så här.
.row.cols2 .col { flex: 1 1 50%; flex: 1 1 calc(50% - 1rem);}Funktionen calc() är flexibel i vilke enheter den beräknar med.
Nu fick jag önskad utseende. Uppenbarligen är det viktigt att ha koll på storleken så att kolumnerna verkligen får plats på en rad.
En tanke i sammanhanget är om det var rätt att placera flex-wrap: wrap direkt i .row eftersom det då påverkar alla rader.
Alternativet jag funderar på är att göra en ny klass .wrap som innehåller regeln flex-wrap: wrap. Jag tänker att det kan ge mig aningen mer flexibilitet. För skojs skull kan vi se hur den varianten hade sett ut.
Först skapar vi en klass .wrap.
.wrap { flex-wrap: wrap;}Jag tar sedan bort den regel på .row.
Det sista jag gör är att uppdatera HTML-koden för inledningen av sektionen.
<section class="row cols2 color3 rounded"><section class="row cols2 color3 rounded wrap">Poängen är att jag nu kan styra de sektioner som skall göra wrap, det gäller alltså inte för alla sektioner via .row.
Jag väljer detta alterantivet, i detta sammanhanget kändes det som jag fick störst frihet. Men inget behöver vara rätt eller fel så länge man får den layouten man vill.
En konsekvens av sådana här små beslut är att koden i HTML och i CSS kan få lite olika utseende. Välj den variant som ger dig snyggast och renast kod.
Nu är det din tur, gör så att du kan få ett liknande innehåll i din webbsida, där 4 kolumner wrappar över två rader, inuti en sektion.