Post · October 22, 2026

AMDE 355 – Break the Grid (Week 5)

AMDE 355 · Advanced Web Design · Week 05

Project 1: Break the Grid.

Now put your visual research to work. In this project, you’ll create an expressive, responsive web composition that deliberately challenges a conventional grid—while keeping the content legible, the hierarchy intentional, and the experience usable.

Project 01Art directionCSS GridResponsive composition

01 / The challenge — break the grid with purpose

A grid is a tool for organizing relationships. Breaking it does not mean placing elements randomly. It means establishing a visual structure, then disrupting selected parts to create tension, emphasis, rhythm, or surprise.

Start with structure

Build a clear underlying layout with a meaningful reading order and a strong focal point.

Choose what to disrupt

Use scale, alignment, overlap, asymmetry, or an unexpected span to make a deliberate visual move.

Keep it usable

Maintain readable text, coherent content order, clear links, and a layout that adapts to smaller screens.

Design question: What does breaking the grid communicate in your project? Every unusual placement should support the content, tone, or visual hierarchy.

02 / Three ways to challenge a grid

Scale

Make one headline, image, or detail much larger than the surrounding elements. Use scale to create a clear focal point.

Alignment

Offset selected elements, shift the start of a column, or let one item cross the established rhythm.

Overlap & span

Allow a featured item to span multiple tracks or overlap another area—without obscuring essential information.

Remember: contrast works best when there is something consistent to contrast against. Establish a pattern first, then decide where to interrupt it.

03 / Build a grid you can deliberately break

Start with a repeatable CSS Grid. Then use a class such as .featured to give one item a different relationship to the grid.

layout.css · establish the grid

.project-grid {{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }} .project {{ grid-column: span 4; min-width: 0; padding: 1.25rem; border: 1px solid #182033; }} .project.featured {{ grid-column: span 8; background: #b8f34b; }}

The 12-column grid gives you a flexible underlying structure. Regular items span four columns; the featured item spans eight. Try changing the spans before adding any overlap.

04 / Add an intentional disruption

Once the structure is working, introduce one strong move. For example, let the featured item extend across more of the grid, or offset a selected card. Make sure the disruption has a clear purpose.

layout.css · controlled asymmetry

.project:nth-child(3) {{ grid-column: 2 / span 5; transform: translateY(2rem); }} .project.featured h2 {{ font-size: clamp(2rem, 5vw, 5rem); line-height: .95; }}

Watch out: transforms change an element’s visual position without changing the space it occupies in normal layout. Check that the offset does not cause collisions or misleading reading order.

05 / Responsive behavior is part of the design

A desktop composition may rely on asymmetry and overlap. At a narrow viewport, the same choices may become confusing. Make a deliberate responsive version rather than simply shrinking the desktop layout.

layout.css · small-screen version

@media (max-width: 700px) {{ .project-grid {{ grid-template-columns: 1fr; gap: .85rem; }} .project, .project.featured, .project:nth-child(3) {{ grid-column: 1 / -1; transform: none; }} }}

Test: Check the desktop, tablet, and mobile versions. If an overlap or offset stops helping the composition, remove it or replace it with a different small-screen decision.

06 / Project 1 — Break the Grid

Design a single-page web composition for an exhibition, artist, musician, publication, event, or self-initiated concept. Your page should use a clear underlying structure and then challenge it with deliberate visual decisions.

Choose the content

Define the subject and audience. Gather a concise set of text, images, labels, and supporting details.

Establish the system

Define the grid, type hierarchy, spacing, color, and image behavior before introducing disruptions.

Break with intent

Use at least two techniques—such as scale, asymmetry, offset, or spanning—to create a clear focal point.

Refine and test

Test responsive behavior, fix collisions and overflow, and confirm that the page remains legible and navigable.

Project requirements

One complete single-page web composition built with semantic HTML and CSS.
CSS Grid used as a deliberate structural system.
At least two intentional grid-breaking or asymmetrical decisions.
A considered typographic hierarchy and consistent visual direction.
A responsive layout that works at desktop, tablet, and mobile widths.
A short rationale explaining what you disrupted and why.

Success criteria: the design has a strong focal point, the unusual layout choices feel intentional, the content remains understandable, and the responsive version is designed rather than compressed.

07 / Critique prompts

What is the underlying grid, and where has the designer chosen to break it?
Which disruption creates the strongest visual effect? Does it support the content?
What do typography, scale, and negative space contribute to the hierarchy?
Where does the layout feel intentional, and where might it feel accidental?
What changes between desktop and mobile, and what stays consistent?

Instructor-only material · Remove before publishing to students

Instructor Layout Code — Step by Step

Live-code a small exhibition page. First build a predictable grid, then introduce a featured item, asymmetry, and a responsive reset. Ask students to describe the effect of each change before applying it.

Step 1 — Add the HTML

Use a small amount of content so students can see how layout changes affect hierarchy.

index.html · instructor demo

<main class=“page”> <header class=“page-intro”> <p class=“eyebrow”>Independent Exhibition / 2026</p> <h1>Unstable Ground</h1> <p>Artists working between memory, place, and transformation.</p> </header> <section class=“work-grid”> <article class=“work featured”> <p>01 / FEATURED</p> <h2>After the Light</h2> <p>Photography, gesture, and memory.</p> </article> <article class=“work”> <p>02 / VIDEO</p> <h2>Slow Signal</h2> </article> <article class=“work”> <p>03 / PRINT</p> <h2>Field Notes</h2> </article> <article class=“work”> <p>04 / INSTALLATION</p> <h2>Temporary Forms</h2> </article> </section> </main>

Step 2 — Establish a regular grid

Before breaking anything, make the page feel orderly. This gives the class a baseline for comparison.

style.css · regular grid

* {{ box-sizing: border-box; }} body {{ margin: 0; background: #f2f0e9; color: #182033; font-family: Arial, sans-serif; }} .page {{ width: min(92%, 1200px); margin-inline: auto; }} .work-grid {{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }} .work {{ padding: 1.5rem; min-height: 220px; border: 1px solid #182033; }}

Step 3 — Create a featured item

Give one item a larger span and an accent background. Ask how the focal point and reading order have changed.

style.css · featured span

.work.featured {{ grid-column: span 2; background: #b8f34b; }} .work.featured h2 {{ font-size: clamp(2rem, 4vw, 4.5rem); line-height: .95; }}

Step 4 — Introduce asymmetry

Offset one item. Preview and inspect the relationship between the element’s visual position and the space it still occupies in the grid.

style.css · controlled offset

.work:nth-child(3) {{ transform: translateY(2rem); }} .work:nth-child(4) {{ grid-column: 2 / span 2; }}

Step 5 — Reset the composition for mobile

Remove the large spans and offsets on smaller screens. Explain that this is not abandoning the art direction; it is adapting the composition to a different context.

style.css · responsive reset

@media (max-width: 700px) {{ .work-grid {{ grid-template-columns: 1fr; }} .work.featured, .work:nth-child(3), .work:nth-child(4) {{ grid-column: auto; transform: none; }} }}

Step 6 — Live critique

Ask students to identify the original grid and the two deliberate disruptions.
Remove one disruption and compare the visual hierarchy.
Try a different span or offset and discuss whether it improves the composition.
Resize to mobile and verify that all content remains visible and in a sensible order.
Ask students to explain the intent behind one unusual layout decision in a single sentence.

Instructor note: Keep the live demo focused on one change at a time. Students should see the relationship between structure and disruption, and understand that responsive behavior is part of the design—not a cleanup task at the end.

08 / Final quality check

The page has a clear underlying grid.
At least two disruptions have a clear visual purpose.
Typography and spacing support the hierarchy.
No content is obscured or unintentionally overlapping.
Desktop, tablet, and mobile versions have been tested.
The rationale explains what was changed and why.