Grid

CSS grid klasser

1. Container

1.1 With spacing

Content

1.2 Fullwidth

Content

2. Asymmeterical layout

2.1 Left

Content A
Content B

2.2 Right

Content A
Content B

3. Sidebar layout

3.1 Left

Content A is a sidbar
Content B

3.2 Right

Content A
Content B is a sidbar

4. Media layout

4.1 Left

Content A is a sidbar
Content B

4.2 Right

Content A
Content B is a sidbar

5. Media-icon layout

5.1 Left side icon

Ikon
Content

5.1 Left side icon

Content
Ikon

5.2 Both side icon

Ikon A
Content B
Ikon B

6. Inline layout

6.1 Auto height

Content A
Content A has a child
Content B is a larger text
Content C
Content D much larger text
Content E is a dummy text
Content F

6.2 Same height

Content A
Content A has a child
Content B is a larger text
Content C
Content D much larger text
Content E is a dummy text
Content F

6.3 Justified right

Content A
Content A has a child
Content B is a larger text
Content C
Content D much larger text
Content E is a dummy text
Content F

6.4 Nowrap

Content A
Content A has a child
Content B is a larger text
Content C
Content D much larger text
Content E is a dummy text
Content F

7. Stacked / Grid layout

7.1 Column 1

Content A
Content A has a child
Content B is a larger text
Content C

7.2 Column 2

Content A
Content A has a child
Content B is a larger text
Content C

7.3 Column 3

Content A
Content A has a child
Content B is a larger text
Content C

7.4 Column 4

Content A
Content A has a child
Content B is a larger text
Content C
Content D
Content E

8. Centered content

Content

9. Stacked content

Content A
Content B
Extra long Content C with extra texts and takes up extra space
Content D

10. Tabular content

10.1 Quarters

Content A
Content B
Extra long Content C with extra texts and takes up extra space
Content D

10.2 Thirds

Content A
Content B
Extra long Content C with extra texts and takes up extra space

10.3 Split

Content A
Extra long Content B with extra texts and takes up extra space

Properties

Root variables
Namn Value
--grid-container-margin 4rem
--grid-container-gap 1.5rem
--grid-container-content-width 71.25rem
--grid-layout-gap 1.5rem
--grid-content-gap 1rem
--grid-max-line-width 80ch