Grid

Grid är en CSS-layoutmodul som ger ett kraftfullt och flexibelt sätt att skapa komplexa layouter. I korthet låter rutnät dig definiera ett rutnätssystem med rader, kolumner och avstånd, och sedan placera dina element där du vill i rutnätet.

Praktiska steg

• Definiera rutnätsbehållaren: Börja med att definiera ditt rutnätsbehållardiv med egenskapen display: grid;. T.ex:

.rutnät {
  display: grid;
}

• Definiera rutnätsraderna och -kolumnerna: Använd grid-template-rows och grid-template-columns för att definiera antalet och storleken på rader och kolumner. T.ex:

.rutnät {
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

• Definiera rutnätsluckorna: Använd grid-gap för att lägga till vertikala och horisontella luckor mellan rutnätsraderna och -kolumnerna. T.ex:

.rutnät {
  grid-gap: 1em;
}

• Placera rutnätsobjekten: Använd grid-area, grid-row och grid-column för att placera dina element på önskade positioner i rutnätet. T.ex:

.element1 {
  grid-area: 1 / 1 / 2 / 2;
}

.element2 {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

Viktiga begrepp

• Rutnätsbehållare: Ett element som definierar rutnätets gränser och innehåller rutnätsobjekten.
• Rutnätsobjekt: Element som placeras i rutnätet.
• Rutnätskolumner: Vertikala uppdelningar i rutnätet.
• Rutnätsrader: Horisontella uppdelningar i rutnätet.
• Rutnätsluckor: Avstånd mellan rutnätskolumnerna och -raderna.
• Rutnätsytor: Namngivna områden i rutnätet där rutnätsobjekt kan placeras.

Exempel

Nedan följer ett enkelt exempel på en rutnätslayout:

<div class="rutnät">
  <div class="element1">Element 1</div>
  <div class="element2">Element 2</div>
  <div class="element3">Element 3</div>
</div>

.rutnät {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}

.element1 {
  grid-area: 1 / 1 / 2 / 2;
}

.element2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.element3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

Detta kommer att skapa ett rutnät med tre kolumner och två rader, med ett avstånd på 1 em mellan raderna och kolumnerna. Element 1 placeras i den första raden, den första kolumnen, element 2 placeras i den första raden, den andra kolumnen och element 3 placeras i den andra raden, den tredje kolumnen.