STEP 6 — LAYOUT: FLEX & GRID

The capstone of the hand-coding half of the course: the same HTML can become completely different pages depending on the CSS. This week you meet the two modern layout tools, Flex and Grid.

How to read this page: first come the instructions — what to do this week. After the instructions, one gray-blue box gathers all the material for your Step 6 page — rewrite it in your own words. Text shown as code is the kind of thing you type onto your page.

 

INSTRUCTIONS

1 · Lay out your page two ways

Take the standard structure you have used all term — a header, a main holding two section blocks and an aside, and a footer — and lay it out with CSS. Try it first with Flex, then with Grid, and notice how the same HTML becomes a different page each time.

2 · Mind the wrapper

The Flex version needs one extra element: a wrapper div around the two sections, so Flex sees two children — the column of sections and the aside. The Grid version needs no wrapper. Understanding why is the heart of this week.

 

MATERIAL FOR YOUR STEP 6 PAGE

Everything inside the gray-blue box below is what you rewrite, in your own words, onto your step6.html page.

Same HTML, different CSS

Take one HTML file — a header, a main holding two sections and an aside, a footer — and it can render as a single stacked column or as a two-column layout, purely by changing the CSS. The structure stays put; the styling decides how it looks.

Flex works in one direction

display: flex; turns an element into a flex container, and its children line up in a row by default. Flex thinks in one direction at a time. To place a column of sections next to the aside, you bundle the two sections in a wrapper div so Flex sees two children: the wrapper and the aside.

Grid works in rows and columns at once

display: grid; plus grid-template-columns defines the columns directly. We write these in percentages first — grid-template-columns: 70% 30%; makes a wide column and a narrow one. Each value in the list becomes the next column, left to right, separated by spaces (no commas). Grid places main’s children directly, so it needs no wrapper div.

Sizing the columns

Columns can be sized several ways: % (a share of the container), fr (a share of the leftover space), px (a fixed width that never changes), and auto (sized by the content). Grid sizes the slots from the container; Flex sizes the items from themselves.

 
 

Work Due — Friday, October 16

Build your step6.html page — your own notes on same-HTML-different-CSS, Flex (with the wrapper div), and Grid in percentages. Lay out your standard structure both ways so you can see the difference. Upload it to your site.

This is the last of the six hand-coding steps. From here on, AI becomes a directed tool in your workflow.