fbpixel

Ä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;
  }
}
Om du emellanåt vill ha vår - digitalbyrån Wonderfour - syn på nyheter i gränslandet tech & media, ja då ska du omedelbart prenumerera på vårt digitala nyhetsbrev :-)
Tummen upp

Söker du en digitalbyrå
med teknisk spets?

Då kan du sluta leta nu.

Kontakta vår vd & projektledare Lena på

lena@wonderfour.se +46 70 710 83 43

Välj rätt digitalbyrå
Jag kan inte nog uttrycka min uppskattning över samarbetet med er. Ni är alltigenom helproffsiga!
- Eva Blomqvist, Generalsekreterare Bilkåren
  • Wonderfour digitalbyrå
  • Rörstrandsgatan 46
  • 113 40 Stockholm
  • +46 70 710 83 43
  • info@wonderfour.se
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.
Wonderfour
- en smartare digitalbyrå & webbyrå i Stockholm
Rörstrandsgatan 46
113 40 Stockholm
org nr 556580-6386
Wonderfour W4 AB
Credit rating AAA

På digitalbyrån Wonderfour skapar vi smarta digitala lösningar för smarta företag, organisationer och varumärken. Det har vi gjort sedan 2010.

Vi hjälper er med analys & strategi, med koncept, design, UI och UX. Vi löser det tekniska - kod & programmering - och utvecklar helst i Php och WordPress. Vi kan producera ert innehåll - text och rörligt - och vi kan ta hand om er närvaro i sociala medier. Visst låter det bra? Tillsammans gör vi ert nästa digitala projekt helt wonderfour!

have a wonderfour day!