Grid-layout
Gridlayoutklasser används för att definiera container- eller innehållsstruktur med hjälp av css-gridsystemet. Varje klass har sina responsiva underklasser ifall du behöver växla mellan gridklasser beroende på enhetsstorlek. T.ex. l-grid-col md:l-grid-col-2 lg:l-grid-col-3 betyder att layouten är en kolumn som standard, två kolumner på surfplattan och tre kolumner på stationära och större skärmar.
Grid-kolumn
En kolumn
Content A
Content A has a child
Content B is a longer text
Content C
Två kolumner
Content A
Content A has a child
Content B is a longer text
Content C
Tre kolumner
Content A
Content A has a child
Content B is a longer text
Content C
Fyra kolumner
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Content E
Fem kolumner
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Content E
Inline Grid
En kolumn
Content A
Content A has a child
Content B is a longer text
Content C
Två kolumner
Content A
Content A has a child
Content B is a longer text
Content C
Viktad layout
Höger (1 : 2)
Content A
Content B
Vänster (2 : 1)
Content A
Content B
Grid kolumn span
Två kolumn span
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Tre kolumn span
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Fyra kolumn span
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Fem kolumn span
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Content E
Grid row span
Två row span
Content A
Content A has a child
Content B is a longer text
Content C
Content D
Tre row span
Content A
Content A has a child
Content A has a child
Content B is a longer text
Content C
Content D
Content E
Fyra row span
Content A
Content A has a child
Content A has a child
Content A has a child
Content B is a longer text
Content C
Content D
Content E
Fem row span
Content A
Content A has a child
Content A has a child
Content A has a child
Content A has a child
Content B is a longer text
Content C
Content D
Content E
Översikt
| Klass | Beskrivning |
|---|---|
| l-grid / l-grid-col-1 | En kolumn layout |
| l-grid-inline | För inline grid |
| l-grid-col-2 | Två kolumn layout |
| l-grid-col-3 | Tre kolumn layout |
| l-grid-col-4 | Fyra kolumn layout |
| l-grid-col-5 | Fem kolumn layout |
| l-grid-col-6 | Sex kolumn layout |
| l-grid-col-7 | Sju kolumn layout |
| l-grid-col-8 | Åtta kolumn layout |
| 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 | innehållet spänner över två gridkolumner |
| l-grid-col-span-3 | innehållet spänner över tre gridkolumner |
| l-grid-col-span-4 | innehållet spänner över fyra gridkolumner |
| l-grid-col-span-5 | innehållet spänner över fem gridkolumner |
| l-grid-col-span-6 | innehållet spänner över sex gridkolumner |
| l-grid-col-span-7 | innehållet spänner över sju gridkolumner |
| l-grid-col-span-8 | innehållet spänner över åtta gridkolumner |
| l-grid-row-span-2 | innehållet spänner över två gridrader |
| l-grid-row-span-3 | innehållet spänner över tre gridrader |
| l-grid-row-span-4 | innehållet spänner över fyra gridrader |
| l-grid-row-span-5 | innehållet spänner över fem gridrader |
| l-grid-row-span-6 | innehållet spänner över sex gridrader |
| l-grid-row-span-7 | innehållet spänner över sju gridrader |
| l-grid-row-span-8 | innehållet spänner över åtta gridrader |