stickleback.dk

Webudvikling – enkelt og brugervenligt

CSS Grid – kan det bruges?

Det handler om rækker og kolonner. Ikke rækker eller kolonner, men rækker og kolonner. Layout, altså.

Der skal en hel del html-markup samt CSS til et layout som dette:

Eksempel på et grid layout med tre blokke i hver række.

See the Pen Floats by risager (@risager) on CodePen.

Også hvis man bruger Flexbox:

See the Pen Flexbox by risager (@risager) on CodePen.

Med CSS Grid kan man nøjes med meget mindre css:

.grid {
  display: grid;
  margin: 0;
  padding: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, auto));
  grid-gap: 2rem;
  background: teal;
}

.item {
  background: aliceblue;
  padding: 3rem 1rem;
}

Bemærk at media queries er overflødige!
Link til Codepen

Men kan det bruges?

Ja og nej. Eller… næsten. Det virker fint i Firefox, Opera, Chrome, Safari – og næsten, men ikke helt på samme måde i Edge og IE.

Svaret er indtil videre:
Ja, til nogle websites.
Men ikke uden hensyntagen til IE og Edges brug af den oprindelige CSS Grid specifikation, eller med fall-back til flexbox eller floats. Til gengæld behøver alle websites ikke at se ens ud i alle browsere, og i min sandkasse/legeplads Strik & kod har jeg besluttet at bruge CSS Grid til layout.

Can I Use – CSS Grid
An Introduction to CSS Grid
Get Started with Grid Layout