Styleguide

Grid

Gridlayoutklasser används för att definiera container- eller innehållsstrukturen med hjälp av css-gridsystemet.

Om grid

Du kan dela upp utrymmet i en container i flera kolumner. Du kan också lägga flera rader med kolumner under varandra så att du delar upp utrymmet i ett tvådimensionellt rutnät.

Bredden är dynamisk och beror på hur många kolumner du väljer att lägga till. Alla kolumner är alltså lika breda och avståndet mellan varje kolumn är lika stort. Vill du ha bredare eller högre kolumner kan du definiera dem men kolumn-span eller row-span.

Varje klass har sina responsiva underklasser ifall du behöver växla mellan gridklasser beroende på enhetsstorlek. Till exempel betyder l-grid-col md:l-grid-col-2 lg:l-grid-col-3 att layouten är:

  • en kolumn som standard
  • två kolumner på surfplatta och uppåt
  • tre kolumner på stationära skärmar och uppåt

Kolumner

Kolumner används för att definiera en sektion i din layout. Du kan välja mellan 1 till 5 kolumner i din layoutsektionen.

En kolumn

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

HTML 
<div class="l-grid-col-1">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
</div>

Två kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

HTML 
<div class="l-grid-col md:l-grid-col-2">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
</div>

Tre kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-3">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
</div>

Fyra kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

Innehåll D

Innehåll E

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-4">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
</div>

Fem kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

Innehåll D

Innehåll E

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-5">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
</div>

Sammanfoga kolumner (Grid kolumn span)

För att definiera en kolumns bredd kan du använda kolumn-span.

Två sammanfogade kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

Innehåll D

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-5">
   <div class="l-grid-col-span-2 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
</div>

Tre sammanfogade kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

Innehåll D

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-5">
   <div class="l-grid-col-span-3 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
</div>

Fyra sammanfogade kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

Innehåll D

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-5">
   <div class="l-grid-col-span-4 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
</div>

Fem sammanfogade kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

Innehåll D

HTML 
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-5">
   <div class="l-grid-col-span-5 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
</div>

Sammanfoga rader

För att definiera en kolumns höjd kan du använda row-span.

Två sammanfogade rader

Innehåll A

Innehåll A3

Innehåll B med lite mer text

Innehåll C

Innehåll D

HTML 
<div class="l-grid-col-4">
   <div class="l-grid-row-span-2 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A3</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
     <p>Innehåll D</p>
   </div>
</div>

Tre sammanfogade rader

Innehåll A

Innehåll A2

Innehåll A3

Innehåll B med lite mer text

Innehåll C

Innehåll D

Innehåll E

HTML 
<div class="l-grid-col-4">
   <div class="l-grid-row-span-3 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
      <p>Innehåll A3</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
</div>

Fyra sammanfogade rader

Innehåll A

Innehåll A2

Innehåll A3

Innehåll A4

Innehåll B med lite mer text

Innehåll C

Innehåll D

Innehåll E

HTML 
<div class="l-grid-col-4">
   <div class="l-grid-row-span-4 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
      <p>Innehåll A3</p>
      <p>Innehåll A4</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
</div>

Fem sammanfogade rader

Innehåll A

Innehåll A2

Innehåll A3

Innehåll A4

Innehåll A5

Innehåll B med lite mer text

Innehåll C

Innehåll D

Innehåll E

HTML 
<div class="l-grid-col-4">
   <div class="l-grid-row-span-5 content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
      <p>Innehåll A3</p>
      <p>Innehåll A4</p>
      <p>Innehåll A5</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
</div>

Inline grid

Du använder inline grid för att skapa kolumner med dynamisk bredd, det vill säga bredden anpassar sig efter innehållet. Alla kolumner får samma bredd som den kolumn som är bredast.

En kolumn

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

HTML 
<div class="l-grid-col-1 l-grid-inline">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
</div>

Två kolumner

Innehåll A

Innehåll A2

Innehåll B med lite mer text

Innehåll C

HTML 
<div class="l-grid-col md:l-grid-col-2 md:l-grid-inline l-grid-inline">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
      <p>Innehåll A2</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B med lite mer text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C</p>
   </div>
</div>

Relativ layout

Se sidan Färdiga mönster för exempel på relativ layout.

Översikt av gridklasserna

Gridklasserna

Kolumn

Beskrivning

l-grid / l-grid-col-1

En kolumn

l-grid-inline

Inline grid

l-grid-col-2

Två kolumner

l-grid-col-3

Tre kolumner

l-grid-col-4

Fyra kolumner

l-grid-col-5

Fem kolumner

l-grid-col-6

Sex kolumner

l-grid-col-7

Sju kolumner

l-grid-col-8

Åtta kolumner

l-grid-col-1-2

Viktad layout höger (1:2)

l-grid-col-2-1

Viktad layout vänster (2:1)

l-grid-col-span-2

Sammanfogar två kolumner

l-grid-col-span-3

Sammanfogar tre kolumner

l-grid-col-span-4

Sammanfogar fyra kolumner

l-grid-col-span-5

Sammanfogar fem kolumner

l-grid-col-span-6

Sammanfogar sex kolumner

l-grid-col-span-7

Sammanfogar sju kolumner

l-grid-col-span-8

Sammanfogar åtta kolumner

l-grid-row-span-2

Sammanfogar två rader

l-grid-row-span-3

Sammanfogar tre rader

l-grid-row-span-4

Sammanfogar fyra rader

l-grid-row-span-5

Sammanfogar fem rader

l-grid-row-span-6

Sammanfogar sex rader

l-grid-row-span-7

Sammanfogar sju rader

l-grid-row-span-8

Sammanfogar åtta rader

Senast publicerad

Sidansvarig för sidan är Styleguide