Skip to content
nuggetof joy

Post · October 22, 2026

AMDE 355 – Make the Layout Do Something (Week 2)

AMDE 355 · Advanced Web Design · Week 02

Make the Layout
Do Something.

Today we move past “put the boxes in a row.” We’ll revisit CSS layout tools, compare Flexbox and Grid, and use spacing, alignment, and hierarchy to make a page feel intentional.

CSS layoutFlexboxGridResponsive thinking

01 / The challenge

A layout can be technically correct and still feel flat. Advanced web design means choosing a layout system because it supports the content—not because it is the first CSS trick you remember.

Studio question: What should the viewer notice first, second, and third? Your layout should help answer that question.
A

Flexbox

Best when you are arranging items along one main axis: a navigation bar, toolbar, button group, or a row of controls.

B

Grid

Best when rows and columns work together: editorial layouts, galleries, card systems, and larger page structures.

C

Spacing + hierarchy

Use gap, padding, width, and alignment to establish relationships and create rhythm—not just to fill empty space.

02 / Quick refresher: Flexbox

Flexbox distributes items inside a container. Try changing justify-content, align-items, and gap to see how the relationship changes.

flex-layout.css
/* One-dimensional layout: align items in a row */ .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; }
Try it: Change space-between to center, then flex-start. Notice how the composition changes without changing the HTML.

03 / Quick refresher: CSS Grid

Grid lets you define a two-dimensional structure. This example creates three equal columns that collapse naturally when the container gets narrower.

gallery-grid.css
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } /* At smaller widths, move to two columns */ @media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

04 / Layout is also art direction

Scale

Make one element clearly dominant. Equal-sized everything can make the page feel monotonous.

Rhythm

Repeat a spacing system, then break it intentionally when you need emphasis or a pause.

Negative space

Empty space is an active design element. It can group content, slow the viewer down, or make a focal point feel important.

Constraints

Use max-widths and consistent gaps to keep content readable across screen sizes.

05 / Instructor demo: redesign the same content three ways

  1. Version 1 — Utility: Use a straightforward, balanced grid. Prioritize clarity and scanability.
  2. Version 2 — Editorial: Create one oversized feature card, supporting details, and a deliberate asymmetry.
  3. Version 3 — Experimental: Break the regular rhythm with scale, alignment, or a controlled overlap—but keep the content legible.

Keep the content constant so you can see how layout alone changes the tone and reading order.

06 / In-class studio: Layout Remix

Build a responsive layout for a fictional exhibition, music event, design archive, or personal project. Start with a small set of content: title, short description, one featured item, and at least four supporting items.

1

Build the structure

Use semantic HTML and choose Flexbox or Grid for a clear reason.

2

Establish hierarchy

Use type scale, spacing, and one dominant visual element to establish the viewing order.

3

Make it responsive

Test at desktop and mobile widths. Adjust the layout instead of simply shrinking everything.

4

Make a second direction

Duplicate your design and create a noticeably different composition using the same content.

07 / What to submit

  • A working CodePen with semantic HTML and organized CSS.
  • At least one Flexbox layout and one Grid layout.
  • A responsive adjustment for a smaller viewport.
  • Two distinct layout directions using the same content.
  • Two screenshots or a short note comparing the designs: what changes in hierarchy, mood, and reading order?
Success criteria: The layout has a clear focal point, spacing feels intentional, the content remains readable, and the mobile version feels designed—not merely compressed.

Instructor-only material · Remove before publishing to students

Instructor Layout Code — Step by Step

This is a live-coding demonstration. Build the page in stages, preview after each step, and ask students to predict what will change before editing the CSS.

Demo goal

Use one small exhibition listing to show how the same content can feel orderly, editorial, or experimental through layout alone. The starter uses Grid for the main page and Flexbox for the top bar.

Step 1 — Create the HTML structure

Start with semantic content before styling. Explain that the class names are hooks for CSS and that the content order should still make sense without visual styling.

index.html · instructor demo
<header class=“site-header”> <p class=“brand”>FIELD NOTES</p> <nav aria-label=“Main navigation”> <a href=“#featured”>Featured</a> <a href=“#archive”>Archive</a> </nav> </header> <main class=“page-layout”> <section class=“feature” id=“featured”> <p class=“eyebrow”>EXHIBITION 01 / OCTOBER</p> <h1>Unstable Ground</h1> <p>Works about movement, memory, and place.</p> </section> <section class=“archive” id=“archive”> <article class=“item item-one”><h2>Afterimage</h2><p>Photography · 2026</p></article> <article class=“item item-two”><h2>Soft Machines</h2><p>Interactive · 2025</p></article> <article class=“item item-three”><h2>Common Weather</h2><p>Moving image · 2025</p></article> </section> </main>

Step 2 — Add the base styles and Flexbox header

Normalize the box model, establish the page background and typography, then use Flexbox to align the brand and navigation. Ask: “What happens if we remove display: flex?”

style.css · base + flex
* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: #f2f0e9; color: #182033; } .site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 5vw; border-bottom: 1px solid #c9c7bf; } .brand { font-weight: 900; letter-spacing: .12em; } nav { display: flex; gap: 1.25rem; } a { color: inherit; text-decoration: none; }

Step 3 — Use Grid for the main composition

The feature gets more room than the archive. This is the first clear hierarchy decision: the page is telling viewers what to look at first.

style.css · grid composition
.page-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; padding: 5vw; align-items: start; } .feature { min-height: 440px; padding: clamp(1.5rem, 4vw, 4rem); background: #b8f34b; display: flex; flex-direction: column; justify-content: end; } .feature h1 { font-size: clamp(2.5rem, 7vw, 6rem); line-height: .95; letter-spacing: -.06em; margin: .25em 0; } .archive { display: grid; gap: 1rem; } .item { padding: 1.25rem; border: 1px solid #182033; min-height: 130px; }

Step 4 — Make the layout responsive

Show the page at a narrow viewport before adding the media query. Ask students what feels cramped, then change the structure rather than simply reducing every font size.

style.css · responsive adjustment
@media (max-width: 760px) { .site-header { align-items: flex-start; flex-direction: column; } .page-layout { grid-template-columns: 1fr; padding: 1rem; } .feature { min-height: 340px; } }

Step 5 — Make three quick art-direction variations

  1. Utility version: Change grid-template-columns: 1.2fr .8fr to 1fr 1fr. Reduce the feature height and use a smaller heading. Discuss clarity and balance.
  2. Editorial version: Keep the uneven columns, increase the headline scale, and add more padding around the feature. Discuss emphasis and negative space.
  3. Experimental version: Let the feature span the full grid width by adding grid-column: 1 / -1, then rearrange the archive cards. Discuss how breaking the pattern changes reading order.

Step 6 — Test and discuss

  • Preview at desktop, tablet, and mobile widths.
  • Use browser dev tools to change the viewport and inspect the grid.
  • Ask students to identify the focal point and describe the visual reading order.
  • Ask which layout best fits the content and why. There is no single correct answer; choices should be intentional.
Instructor note: This is a teaching scaffold, not a required student solution. Encourage students to experiment with their own content, proportions, and visual language rather than copying the exact composition.

08 / Before you publish

  • Check that text and cards do not overflow the viewport.
  • Use gap for consistent space between layout items.
  • Confirm the layout still makes sense at a narrow width.
  • Keep CSS selectors readable and avoid unnecessary repeated rules.
  • Make sure colors and text contrast are comfortable to read.

AMDE 355 · Advanced Web Design · Week 02 · Layout is not decoration added at the end. It is part of how the content communicates.