Wonderfour

Insikt_ 2017.09.15

Äntligen CSS-grids

Äntligen CSS-grids

Vi var nyligen på Nordic.js, där Rachel Andrew, som bland annat arbetar med CSS-standarden för W3C pratade om layoutproblematiken i CSS och dess begränsningar, samt hur den nya grid-layout-metoden som togs upp i standarden i mars var inspirerad av javascriptbibliotek såsom Masonry.js.

CSS-Grid layout finns nu i de senaste versionerna av de populäraste webbläsarna, exklusive Microsoft Edge, som ska få stöd för detta i höst.

Tidigare lösningar för att få en kolumnvy mha CSS har involverat float: left och att alla kolumndelar har satta bredder, alternativt att man använt flexbox för att åstakomma en gridlösning på ungefär samma sätt.

Nu finns det alltså en lösning som är mer anpassad för detta. Dels kan man dela upp kolumnernas bredder så en spalt exempelvis alltid är minst 400 pixlar, men att de övriga kolumnerna är procentuella av utrymmet som återstår.

Det finns fortfarande problem med layoutdelen i CSS som exempelvis att ”celler” i kolumnen inte kan prata med varandra (exempelvis ha samma höjder i olika kolumninnehåll, men det finns planer på att införa detta i framtiden.

Eftersom det inte finns stöd i äldre webbläsare och webbläsare fungerar så den hoppar över avsnitt den inte förstår, så är bästa metoden att man bygger för äldre webbläsare först och använder exempelvis:

@supports (display: grid) {
  div {
    display: grid;
  }
}
Till er tjänst
Är vi rätt digital byrå för er? Kontakta Lena Fischer, Head of New Business, så tar vi reda på det.

+46 70 710 83 43
lena@wonderfour.se
Digitala insikter
Tankar, inspiration & insikter från oss på digitala byrån Wonderfour som med ojämna mellanrum droppar rakt ner i din mailbox.

Söker du en digitalbyrå med design thinking? med agilt dna? med teknisk spets?

Då kan du sluta leta nu. Kontakta Lena Fischer, Head of New Business hos oss på digitalbyrån Wonderfour i Stockholm.

lena@wonderfour.se

+46 70 710 83 43

Bli kontaktad

Tack!

Vi kommer höra av oss till er så snart vi kan.
👍
hej!
Jag godkänner att ni sparar mina kontaktuppgifter.