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 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 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 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 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 A has a child
Content B is a larger text
Content C
7.2 Column 2
Content A
Content A has a child
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 A has a child
Content B is a larger text
Content C
7.4 Column 4
Content A
Content A has a child
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
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 |