Awwwards

Ä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;
  }
}

Söker du en digitalbyrå som tänker redaktionellt?

Då kan du sluta leta nu.

Kontakta vår vd & projektledare Lena på

lena@wonderfour.se +46 70 710 83 43

Så arbetar vi
Jag kan inte nog uttrycka min uppskattning över samarbetet med er. Ni är alltigenom helproffsiga!
- Eva Blomqvist, Generalsekreterare Bilkåren
Om du emellanåt vill ha vår syn på nyheter inom gränslandet tech & media så ska du självklart prenumerera på vårt gratis nyhetsbrev.
Hej! Har du frågor? Vill du att jag kontaktar dig?
Lena Fischer, vd
X
Tack!
Jag hör av mig så snart jag kan.
Hoppsan, det där funkade inte. Men du kan höra av dig till mig på lena@wonderfour.se istället.