Cheat sheet · Front end
CSS layout cheat sheet
Selectors, the box model, Flexbox, Grid, positioning and responsive rules in one place.
- Sections
- 6
- Items
- 35
- Area
- Front end
- Download
- PNG, PDF
Cheat sheet
CSS layout
Selectors, the box model, Flexbox, Grid, positioning and responsive rules in one place.
Selectors
.card- Elements with class="card"
#hero- The element with id="hero"
a:hover- A link while the pointer is over it
ul li- Any li inside a ul
ul > li- Only direct children
li:nth-child(2)- The second item
input:focus-visible- A control reached with the keyboard
Box model
width / height- Size of the content box
padding: 1rem- Space inside the border
margin: 0 auto- Space outside; auto centres a block
border: 1px solid #ccc- A line around the element
box-sizing: border-box- Width includes padding and border (use everywhere)
Flexbox (one direction)
display: flex- Lay children out in a row
flex-direction: column- Stack children in a column
justify-content: space-between- Spread along the main direction
align-items: center- Centre across the main direction
gap: 1rem- Space between children
flex-wrap: wrap- Let children go to the next line
flex: 1- Let a child share the free space
Grid (rows and columns)
display: grid- Start a grid
grid-template-columns: repeat(3, 1fr)- Three equal columns
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))- As many columns as fit
gap: 1rem- Space between cells
grid-column: span 2- Let an item cover two columns
place-items: center- Centre items in their cells
Positioning and size
position: relative- Move from the normal place; anchor for children
position: absolute- Place inside the nearest relative parent
position: sticky; top: 0- Stay in view while scrolling
position: fixed- Fixed to the screen
z-index: 10- Stacking order (needs a position)
rem em % vw vh- Units: root text size / parent size / parent / screen width / screen height
Responsive and variables
@media (min-width: 768px) { }- Rules for wider screens
--brand: #38bdf8;- Define a variable
color: var(--brand)- Use a variable
clamp(1rem, 2vw, 2rem)- A size with a minimum, a preferred value and a maximum
Remember
- Centre anything: make the parent display: grid and add place-items: center.
- Design for a small screen first, then add @media rules for wider ones.
Learn it properly
A cheat sheet helps you remember. These lessons explain the ideas step by step, with examples.