Module 1 · The browser: HTML and CSS Lesson 2 of 15
CSS, flexbox and grid
Flexbox lays out one row or column; grid lays out a whole layout. Knowing which one a problem wants is most of CSS confidence.
The concept
CSS has three jobs and it is worth separating them in your head: layout (where the boxes go), typography (how the text reads) and colour. Flexbox lays out items in ONE direction — a row of buttons, a navbar — and grid places items in TWO directions at once — a page with a sidebar, a gallery of cards.
The properties worth knowing cold: display: flex with justify-content and align-items for alignment; gap instead of margins between items; display: grid with grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) for a card list that reflows by itself; and max-width with margin: 0 auto to centre a content column. Learn those and half of web layout is done.
/* A card list that reflows by itself — no media query needed. */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.card {
padding: 18px;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
}
.card h3 { margin: 0 0 6px; }Common mistakes
The mistake is positioning everything absolutely so it matches one screenshot at one window size. Absolute positioning takes elements out of the flow, so nothing can reflow and the page breaks the moment the window changes. Lay out with flex and grid; reserve positioning for badges and overlays.
Worked example
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) gives a responsive card grid with no media queries at all.
Your practice task
Build a responsive card grid of six job cards that is three across on a laptop and one across on a phone.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
CSS has three jobs and it is worth separating them in your head: layout (where the boxes go), typography (how the text reads) and colour.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.