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