PresentationerSlide 1/1

Modul 4 · Kapitel 4.2

Grid för sidlayouter

Styr kolumner och rader samtidigt.

Mål

Efter kapitlet ska du kunna...

  • förklara skillnaden mellan Flexbox och Grid
  • skapa kolumner och rader
  • känna igen Grid-begreppen
  • använda repeat, fr, minmax, auto-fit och auto-fill

Flexbox eller Grid?

En eller två dimensioner

FlexboxGrid
En huvudriktningKolumner och rader
Meny eller kortradGalleri eller sidlayout

De kan användas tillsammans.

Starta Grid

Föräldern blir grid-container

.cards {
  display: grid;
}
Grid-item 1
Grid-item 2
Grid-item 3

Enbart display: grid skapar inga synliga kolumner. Elementen ligger fortfarande under varandra.

Container och items

Föräldern styr barnen

<div class="cards">
  <article>Kort 1</article>
  <article>Kort 2</article>
</div>
  • .cards är grid-container.
  • article-elementen är grid-items.
  • Vi tar de övriga Grid-begreppen när de behövs.

Kolumner

grid-template-columns

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
  • grid-template-columns bestämmer hur många kolumner som finns och hur breda de är.
  • Två värden skapar två kolumner. En kolumn kallas också ett kolumnspår.
  • fr betyder en del av det lediga utrymmet.
2fr
1fr

Interaktiv fr

Styr tre kolumner

grid-template-columns: 2fr 1fr 1fr;

Alla tre värden delar på samma lediga bredd.

2fr
1fr
1fr

repeat

Upprepa samma kolumn

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

repeat(3, 1fr) betyder tre lika breda kolumner.

En ruta där en rad och en kolumn möts kallas en grid-cell.

Interaktiv repeat

Ändra antal kolumner

repeat(3, 1fr)
1
2
3
4
5
6

gap

Avstånd mellan Grid-items

gap: 1rem;
1
2
3
4
5
6

gap skapar mellanrum mellan spåren, inte runt containern. Gränserna mellan spåren kallas grid lines.

minmax

Ge en kolumn två gränser

grid-template-columns: minmax(10rem, 1fr);
  • minmax(min, max) anger minsta och största tillåtna storlek.
  • 10rem: kolumnen får inte bli smalare än 10rem.
  • 1fr: kolumnen får växa och använda ledigt utrymme.

Här finns bara en kolumn. minmax skapar inte fler kolumner.

Interaktiv auto-fit

Bredden bestämmer antalet kolumner

repeat(auto-fit, 10rem)

1
2
3
4
5
6

Gör rutan smalare: auto-fit minskar automatiskt antalet kolumner som får plats.

auto-fit

Låt bredden bestämma antalet

grid-template-columns:
  repeat(auto-fit, 10rem);
  • auto-fit ersätter ett bestämt antal som 3.
  • Grid skapar så många 10rem-kolumner som får plats.
  • När rutan blir smalare minskar antalet kolumner.

Tillsammans

Interaktiv auto-fit + minmax

repeat(auto-fit, minmax(10rem, 1fr))

1
2
3
4
5
6
  1. auto-fit bestämmer hur många kolumner som får plats.
  2. minmax sätter minsta bredd och 1fr fyller ut raden.

auto-fill

Fyll raden och behåll tomma spår

grid-template-columns:
  repeat(auto-fill, minmax(14rem, 1fr));

Tomma spår behålls. Därför kan synliga kort bli smalare än med auto-fit.

Jämför

auto-fit och auto-fill

Minsta kolumnbredd: 8rem

Skillnaden syns när det finns plats för fler spår än kort.

auto-fitrepeat(auto-fit, minmax(8rem, 1fr))
auto-fillrepeat(auto-fill, minmax(8rem, 1fr))

grid-template-areas

Namnge delarna i layouten

.page {
  grid-template-areas:
    "header header"
    "aside  main"
    "footer footer";
}

Ett namngivet område av en eller flera celler kallas en grid-area.

Namnen gör sidans struktur lättare att se i CSS-koden.

Interaktiva områden

Bred eller smal layout

"header header" "aside main" "footer footer"
header
aside
main
footer

Grid-laboration

Kombinera egenskaperna

1
2
3
4
5
6

Kontrollfråga

Vad betyder 2fr 1fr?

Två kolumner som delar på ledigt utrymme.

Svar: första kolumnen får två delar och den andra en del.

Prova själv

Bygg ett responsivt kortgalleri

  1. Skapa sex artiklar.
  2. Lägg dem i en grid-container.
  3. Testa repeat(3, 1fr).
  4. Byt till repeat(auto-fit, minmax(14rem, 1fr)).
  5. Ändra webbläsarens bredd.

Sammanfattning

Kom ihåg

  • Grid styr rader och kolumner samtidigt.
  • fr delar ledigt utrymme.
  • repeat upprepar spår.
  • minmax sätter gränser.
  • auto-fit kollapsar tomma spår, auto-fill behåller dem.