Layout med grid

Lag en div med klasse wrapper <div class="wrapper"> ... </div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

Alternativer for grid-template-columns: 1fr 1fr 1fr;

Du kan endre forholdet mellom de forskjellige kolonnene slik: 2fr 1fr 1fr . Nå vil den første være dobbelt så stor som de to andre.

grid-auto-rows: minmax(100px, auto);
Denne css reglen sier at hver rad skal ha minimumshøyde på 100px.

grid-gap: 10px er avstanden mellom hver rad/kolonne.

Du vil nå få en layout slik som under:

Du kan styre størrelsen på innholdet ved å lage en regel for elementene inne i grid.

.grid-item {
  max-height: 200px;
  max-width: 200px;
}

Layout med Flex

Flex er godt egna til å lage layout som tilpasser seg til ulike bredder på display. Dermed kan en lage regler som gjør at på en stor skjerm kan man se flere bilder ved siden av hverandre, mens på en mobil blir de vist nedover (en i bredden).

Sentrering med flex

Git denne html koden: <div class="parent> <div class="child"> </div> </div>

Da vil følgende css sentere div.child midt inne i div.parent.

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}