Work in progress

Learn Layout

Flexbox

Single column or row

.flex { align-items: center; display: flex; justify-content: center; }

Grid

Multiple columns and rows

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; place-items: center; }

Want to learn more?

We recommend taking Kevin Powell's 21-Day Challenge: Conquering Responsive Layouts

Back Next: Specificity