LAYOUT CHEATSHEET
Box Model
Box Sizing
box-sizing: border-box | content-box
Box Model
Margin
margin: 2px 4px 6px 8px | 0 auto
Box Model
Padding
padding: 2px 4px 6px 8px
Box Model
Border Color
border-color: #2AA9E0
Box Model
Border Style
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Box Model
Border Width
border-width: 10px
W3C CSS Flexible Box Layout Module Level 1
Grid Content
Grid Template Columns
grid-template-columns: 40px 50px auto 50px 40px
Grid Content
Grid Template Rows
grid-template-rows: 25% 100px auto
Grid Content
Grid Template Areas
grid-template-areas: "a b c" | none
Grid Content
Grid Template
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr
Grid Content
Grid Column Gap
grid-column-gap: 10px
Grid Content
Grid Row Gap
grid-row-gap: 10px.
Grid Content
Justify Items
justify-items: start | end | center | stretch
Grid Content
Align Items
align-items: start | end | center | stretch.
Grid Content
Justify Content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Grid Content
Align Content
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Grid Content
Grid Auto Columns
grid-auto-columns: 100px | max-content | min-content
Grid Content
Grid Auto Rows
grid-auto-rows: 100px | max-content | min-content
Grid Content
Grid Auto Flow
grid-auto-flow: row | column | row dense | column dense
Grid Content
Grid Column Start
grid-column-start: 2 | areaname | span 2 | span areaname | auto
Grid Content
Grid Column End
grid-column-end: 2 | areaname | span 2 | span areaname | auto
Grid Content
Grid Row Start
grid-row-start: 2 | areaname | span 2 | span areaname | auto
Grid Content
Grid Row End
grid-row-end: 2 | areaname | span 2 | span areaname | auto
Grid Content
Grid Column
grid-column: 3 / span 2
Grid Content
Grid Row
grid-row: 3 / span 2
Grid Content
Justify Self
justify-self: start | end | center | stretch
Grid Content
Align Self
align-self: start | end | center | stretch
CSS Grid Layout Module Level 1
Flexbox Content
Flex Direction
flex-direction: row | row-reverse | column | column-reverse
Flexbox Content
Flex Wrap
flex-wrap: nowrap | wrap | wrap-reverse
Flexbox Content
Justify Content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Flexbox Content
Align Items
align-items: flex-start | flex-end | center | baseline | stretch
Flexbox Content
Align Content
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Flexbox Content
Order
order: 0
Flexbox Content
Flex Grow
flex-grow: 0
Flexbox Content
Flex Shrink
flex-shrink: 1
Flexbox Content
Flex Basis
flex-basis: 3px | auto
Flexbox Content
Align Self
align-self: auto | flex-start | flex-end | center | baseline | stretch