CSS Grid (og lidt flex)

as Rachel Andrews put it:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

Huskeregel: justify eller align?

Måske virker denne regel åndssvag først, men jo mere jeg bruger den des mere nyttig virker den. Justify-content er den horisontale akse, simpelthen fordi ordet er LÆNGERE end align-content – som da er den vertikale akse:

justify-content
align-items

Auto-fill (grid-wrap)

Hvis vi vil have grid items til at “wrappe” efter en bestemt størrelse, bruges auto-fill. Her fylder items mindst 400px, og går ned på næste linje hvis de bliver for brede:

  grid-template-columns: repeat(auto-fill, 400px);

Hvis vi alligevel gerne vil have de skal fylde hele containerens breddfe, kan vi stadig bruge minmax():

  grid-template-columns: repeat(auto-fill, minmax(400px, auto));

Leave a comment