CSS Layouts

Før i tiden, nei ikke i gode gamledager, før det. Da brukte man tables for å "style" sider. Dette var før CSS fantes, og er heldigvis ikke nødvendig lenger. Takk og lov for det.

CSS eksisterer og vi kan style ting! Floats lar deg på en måte ta elementer ut av foreldre elementet, og floate det. Om man f.eks. har tre elementer man vil ha ved siden av hverandre, så kan man gjøre dette helt greit med floats.

HTML:

<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
</div>



CSS:

.row {
    display: block;
}

.row .col {
    float: left;
    width: 33.333%;
}

Dette går fint så lenge man husker å cleare floatene sine. Med en gang man skal ha luft i mellom elementene vil man møte på store problemer. Det er vanlig å ønske luft i mellom elementene, men ikke på sidene. Lykke til sier jeg da.

Nåtid. Etter langt om lenge er flexbox endelig mainstream og har veldig bra støtte (ca 96%). Flexbox er 100 ganger bedre enn en hver float løsning. Med display: flex kan man endelig style elementer bortover i kolonner på en enkel måte, og posisjonere elementer vertikalt uten å skrive horible CSS hacks. Slik ser før vs etter ut:

Før

HTML:

<div class="dynamic-container">
    <div class="child-element">lorem ipsum</div>
</div>



CSS:

.dynamic-container {
    position: relative;
    display: block;
}

.dynamic-container .child-element {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%)
               translateZ(0); /* 1 */
    zoom: 1; /* 1 */
    backface-visibility: hidden; /* 1 */
    display: block;
    margin: 0 auto;
    width: 50%;
    /* 1: Fikser blurry tekst, hvis man er heldig */
}

Nå

HTML:

<div class="dynamic-container">
    <div class="child-element">lorem ipsum</div>
</div>



CSS:

.dynamic-container {
    position: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

Som du kan se, flexbox gjør livet enklere.

Fremtiden. CSS Grid er den nyeste layouten metoden, og har ganske bra støtte (ca 87%). Med grid får vi flexbox, men i to dimensjoner, og på steroider. Grid lar oss dele opp siden i kolonner og rader. Vi kan også lage områder ved å samle flere rader og navngi dem. Da kan vi si til elementer at de skal plassere seg selv i det område.

Grid løser også et problem med flexbox og floats, det med luft mellom elementene. Selv i flexbox kan det bli vanskelig å gi riktig luft mellom elementene, hvis man ikke ønsker å bruke justify-content: space-around/between/evenly, men ønsker å gi en spesifikk mengde padding, så er det vanskelig å ikke få padding på hver side av parent elementet. Da har CSS Grid en property som løser akkurat dette, grid-gap. Denne lager luft mellom elementene, men ikke på hver side av parent. Ganske fantastisk.

En vanlig misforståelse er å tenke at Grid erstatter Flexbox, det gjør det altså ikke. Man vil bruke Grid og Flexbox sammen. Det er ikke alltid Grid passer for formålet.