Post · October 20, 2026

Break the Grid

AMDE 355 · Advanced Web Design · Part II

Break the Grid

Turn a predictable project gallery into an expressive digital exhibition. Use CSS Grid to create an asymmetrical composition with oversized features, unexpected proportions, bold color, and a responsive layout that changes as the screen gets smaller.

CSS Grid RemixArt directionResponsive designCreative lab

Start here / Your roadmap

Choose an idea

Pick a creative concept and decide on its mood, colors, and audience.

Set up your files

Create index.html and style.css in the same folder.

Build the layout

Paste the starter code, save both files, and open index.html in your browser.

Make it your own

Change the content, colors, grid proportions, and typography. Test desktop and mobile.

Work in order: Complete Sections 1–3 for your idea and layout, follow Section 4 to set up your files, then use Sections 5–7 to customize, test, and submit your work. You do not need to understand every CSS rule before you begin—experiment and observe what changes.

01 / The creative challenge

In Part I, you built a project gallery using a regular grid. For Part II, imagine that your portfolio is not a collection of equal cards—it is a small digital exhibition with a point of view.

Your task is to design a one-page experience for a fictional creative practice, art exhibition, music label, fashion concept, experimental magazine, or design studio. The layout should feel intentional, surprising, and connected to the subject.

Choose a concept

Invent a creative identity or exhibition. Give it a name, a mood, and a visual direction.

Break the pattern

Use different card sizes, a feature that spans columns, and at least one deliberate asymmetry.

Make it adapt

Rework the layout for smaller screens. The mobile version should feel designed—not simply squeezed.

The rule: You must use CSS Grid as the main layout system. You can use color, type, shapes, images, gradients, and hover states—but every visual choice should support your concept.

02 / Find your visual direction

Before coding, choose one creative direction. Use these as starting points, or invent your own.

01 / Brutalist culture

Oversized typography, hard edges, stark contrast, and unexpected alignment.

Palette idea: cream, red, deep navy.

02 / Dream archive

Soft gradients, layered imagery, atmospheric color, and unusual proportions.

Palette idea: violet, pink, gold, black.

03 / Editorial system

Strict typography, modular information, graphic lines, and a controlled grid.

Palette idea: black, paper, one accent.

04 / Future lab

Technical labels, vivid accents, geometric shapes, and a digital-instrument feel.

Palette idea: acid green, blue, charcoal.

03 / Understand the composition

Grid can do more than make equal columns. You can make a feature span multiple tracks, let an item occupy more than one row, and use empty space to create rhythm.

HERO / FEATURE0102
VERTICAL030405 / WIDEINFO

This is a schematic layout, not a finished design. Your final composition should reflect your own concept and content.

.exhibition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.feature {
  grid-column: span 2;
}

.vertical-feature {
  grid-row: span 2;
}

Think like a designer: A large feature attracts attention. Smaller items create rhythm. Repeated gaps create consistency. Empty space gives the eye a place to rest.

04 / Starter code

Use this basic structure to get started. It is intentionally simple. You are expected to change the content, colors, layout, typography, and proportions to fit your idea.

Before you paste the code

Open Sublime Text.
Create a folder named amde355-grid-lab.
Inside that folder, create a file named index.html.
Create a second file named style.css in the same folder.
Copy the HTML sample into index.html and the CSS sample into style.css.
Save both files. Open index.html in a browser to see your starting point.

Part A / Create `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Break the Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <header class="intro">
      <p class="eyebrow">Independent creative practice / 2026</p>
      <h1>AFTER
IMAGE</h1>
      <p class="intro-text">An experimental archive of image, sound, and memory.</p>
    </header>

    <section class="exhibition-grid">
      <article class="tile feature">
        <p class="label">01 / Featured work</p>
        <h2>The Shape of Noise</h2>
        <p>A short description of your main project.</p>
      </article>

      <article class="tile tile-two">
        <p class="label">02 / Study</p>
        <h2>Soft Signals</h2>
      </article>

      <article class="tile tile-three">
        <p class="label">03 / Archive</p>
        <h2>Other Frequencies</h2>
      </article>

      <article class="tile tile-four">
        <p class="label">04 / Notes</p>
        <h2>Field Notes 06</h2>
      </article>

      <article class="tile tile-five">
        <p class="label">05 / Experiment</p>
        <h2>Unstable Forms</h2>
      </article>
    </section>

    <footer class="site-footer">
      <p>Independent work / Based somewhere / 2026</p>
    </footer>
  </main>
</body>
</html>

Part B / Create `style.css`

* {
  box-sizing: border-box;
}

:root {
  --paper: #f1eee7;
  --ink: #171717;
  --accent: #d8ff3e;
  --secondary: #d7c8ff;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, sans-serif;
}

.page {
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 36px 0;
}

.intro {
  max-width: 850px;
  margin-bottom: 42px;
}

.eyebrow, .label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  font-weight: 700;
}

h1 {
  font-size: clamp(4rem, 13vw, 10rem);
  letter-spacing: -.08em;
  line-height: .82;
  margin: 22px 0;
}

.intro-text {
  max-width: 480px;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.exhibition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tile {
  min-height: 220px;
  padding: 22px;
  background: white;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s ease, background .2s ease;
}

.feature {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 454px;
  background: var(--accent);
}

.tile-two { background: var(--secondary); }
.tile-three { background: #202b47; color: white; }
.tile-four { background: #e8a58b; }
.tile-five { background: #d9e8e2; }

.tile h2 {
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height: 1;
  margin: 16px 0 0;
}

.tile:hover {
  transform: translateY(-5px) rotate(-.5deg);
}

.site-footer {
  border-top: 1px solid var(--ink);
  margin-top: 34px;
  padding-top: 12px;
  font-size: .8rem;
}

@media (max-width: 760px) {
  .exhibition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature {
    grid-column: span 2;
    grid-row: auto;
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .exhibition-grid {
    grid-template-columns: 1fr;
  }

  .feature {
    grid-column: auto;
    min-height: 260px;
  }

  .tile {
    min-height: 190px;
  }
}

Starter-code note: The example uses CSS variables for the color palette. Change the values in :root to quickly change the overall mood. The sample content is fictional—replace it with a concept of your own.

05 / Your creative brief

Design a one-page digital exhibition

Invent a creative identity and build a responsive page that communicates its character through layout, typography, color, and rhythm.

Choose a concept and give it a distinctive name.
Include a strong headline and a short introduction.
Create at least five content tiles or project panels.
Make one tile visually dominant by spanning columns or rows.
Use at least three coordinated colors and a clear typographic hierarchy.
Customize the sample content and styling; do not submit the starter unchanged.
Add one thoughtful hover interaction or transition.
Use media queries so the layout works on tablet and mobile screens.
Keep text readable and provide meaningful content, not just decorative boxes.

Push it further / Choose one wild card

Wild card A: The oversized object

Create a tile that dominates the composition and deliberately breaks the visual rhythm.

Wild card B: The archive

Include small labels, dates, edition numbers, or metadata to make the page feel like a curated archive.

Wild card C: The unexpected grid

Use a different grid structure at mobile size instead of simply reducing the number of columns.

Wild card D: The visual interruption

Introduce a contrasting tile, rotation, border treatment, or accent color that intentionally interrupts the pattern.

06 / Suggested workflow

Sketch first. Draw a rough desktop grid on paper. Decide which tile should attract attention first.
Build the structure. Get the HTML and grid working before adding decorative details.
Establish the visual system. Choose a palette, type scale, borders, and spacing rules.
Make the composition expressive. Use spanning, scale, contrast, and negative space with purpose.
Design the small-screen version. Decide what should stack, span, or change order.
Test and refine. Save your files, refresh the browser, resize the window, and correct any overflow.

07 / Submission checklist

Before submitting, work through this list from top to bottom. Check each item only after you have verified it in your files or browser.

index.html and style.css are separate and saved in the same folder.
The page has a distinctive concept and a clear visual direction.
CSS Grid is used for the main composition.
At least one item spans multiple columns or rows.
The page uses intentional typography, color, and spacing.
A hover transition or other small interaction is included.
The layout adapts to tablet and mobile screens.
The page has been tested in a browser at more than one width.
A screenshot of the desktop layout and a screenshot of the mobile layout are ready.
A short reflection explains one design decision and one technical challenge.

Reflection prompts: What is the first thing viewers notice? How does the grid support your concept? What changed when you redesigned the layout for mobile? Which CSS Grid rule had the biggest impact?

08 / Troubleshooting

The layout overflows

Use minmax(0, 1fr) in your column definitions and check for long words or fixed-width elements.

The feature tile breaks on mobile

Reset grid-column and grid-row in your narrow-screen media query.

The design feels random

Repeat a few visual rules—such as spacing, borders, or type styles—so the unusual elements still feel connected.

The page looks flat

Use stronger scale contrast, a more deliberate feature tile, and clearer differences between primary and secondary information.

Quick reference

Goal	CSS
Create a grid	`display: grid;`
Four equal columns	`grid-template-columns: repeat(4, minmax(0, 1fr));`
Span two columns	`grid-column: span 2;`
Span two rows	`grid-row: span 2;`
Set spacing	`gap: 14px;`
Adapt layout	`@media (max-width: 760px) { ... }`
Animate a hover state	`transition: transform .2s ease;`

Break the Grid

Start here / Your roadmap

Choose an idea

Set up your files

Build the layout

Make it your own

01 / The creative challenge

Choose a concept

Break the pattern

Make it adapt

02 / Find your visual direction

01 / Brutalist culture

02 / Dream archive

03 / Editorial system

04 / Future lab

03 / Understand the composition

04 / Starter code

Before you paste the code

Part A / Create index.html

Part B / Create style.css

05 / Your creative brief

Design a one-page digital exhibition

Push it further / Choose one wild card

Wild card A: The oversized object

Wild card B: The archive

Wild card C: The unexpected grid

Wild card D: The visual interruption

06 / Suggested workflow

07 / Submission checklist

08 / Troubleshooting

The layout overflows

The feature tile breaks on mobile

The design feels random

The page looks flat

Quick reference

Part A / Create `index.html`

Part B / Create `style.css`