CSS

CSS Cheatsheet

CSS layout and selector reference - Flexbox, Grid, common selectors, and units.

Flexbox

display: flex

Enable flex layout

justify-content: center

Align items on the main axis

align-items: center

Align items on the cross axis

flex-direction: column

Stack items vertically

flex: 1

Grow/shrink to fill space

gap: 1rem

Space between flex items

Grid

display: grid

Enable grid layout

grid-template-columns: 1fr 1fr

Two equal columns

grid-template-columns: repeat(3, 1fr)

Three equal columns

grid-column: span 2

Span 2 columns

grid-gap: 1rem

Space between grid cells

Selectors

.class

Select by class

#id

Select by ID

a:hover

Pseudo-class - on hover

p::first-line

Pseudo-element

div > p

Direct child selector

div p

Descendant selector

[type="text"]

Attribute selector

Units & sizing

1rem

Relative to root font size

1em

Relative to parent font size

100vh / 100vw

Full viewport height/width

calc(100% - 20px)

Computed value

clamp(1rem, 2vw, 2rem)

Responsive value with min/max