Post · October 20, 2026

CSS Grid: Design Better Layouts

AMDE 355 · Advanced Web Design

CSS Grid: Design Better Layouts

Learn to organize webpage content into flexible rows and columns. Build a responsive project gallery using Sublime Text, CSS Grid, and your own design decisions.

CSS GridSublime TextResponsive designIn-class lab

01 / Learning objectives

Understand the grid

Identify grid containers, grid items, rows, and columns.

Control layout

Use column definitions, fractions, gaps, and spanning.

Design responsively

Create layouts that adapt to different viewport sizes.

Build a real page

Write HTML and CSS in Sublime Text and test in a browser.

Big idea: CSS Grid is a two-dimensional layout system. It helps you organize content across both rows and columns.

02 / Your first grid

Start with a container and six items. The container defines the layout; the items are the elements placed inside it.

<div class="grid-container">
  <div class="grid-item">One</div>
  <div class="grid-item">Two</div>
  <div class="grid-item">Three</div>
  <div class="grid-item">Four</div>
  <div class="grid-item">Five</div>
  <div class="grid-item">Six</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-item {
  padding: 30px;
  background: #e5edff;
  border: 1px solid #b7c9f5;
}

OneTwoThreeFourFiveSix

display: grid

Turns the element into a grid container.

repeat(3, 1fr)

Creates three equal-width columns.

gap: 16px

Creates consistent space between grid items.

03 / Columns and the fr unit

The grid-template-columns property defines the columns. The fr unit distributes available space in fractions.

Three equal columns

grid-template-columns: 1fr 1fr 1fr;

111

Two equal columns

grid-template-columns: repeat(2, 1fr);

Unequal columns

grid-template-columns: 2fr 1fr;

2fr1fr

Tip: repeat(3, 1fr) is a shorter way to write three equal columns. Use minmax(0, 1fr) when you need flexible tracks that can shrink without overflowing.

04 / Rows and spacing

Define rows

grid-template-rows: 150px 200px;

This defines two explicit rows. Additional content may create implicit rows.

Set the gap

gap: 20px;

Sets both row and column gaps to 20 pixels.

Different spacing

row-gap: 24px;
column-gap: 16px;

Use separate values when vertical and horizontal spacing need to differ.

For card layouts, let content determine row height when possible. Fixed row heights can cause text or images to overflow.

05 / Make an item span columns

A featured project can occupy two columns while the other cards occupy one.

.featured {
  grid-column: span 2;
}

Featured projectProject 2Project 3Project 4

To span two rows instead, use grid-row: span 2;. Use spanning to establish hierarchy, not just decoration.

06 / Responsive Grid

This pattern lets the browser decide how many columns fit based on the available width.

.grid-container {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

auto-fit

Fits as many columns as the available space allows.

minmax(220px, 1fr)

Each column aims to be at least 220px wide and can grow to share the available space.

Responsive result

Wide screens show more columns; narrow screens show fewer.

Another approach is to use media queries when you want precise control at particular breakpoints.

07 / Grid or Flexbox?

CSS Grid	Flexbox
Best for two-dimensional layouts across rows and columns.	Best for arranging items along one main axis.
Useful for galleries, card collections, and page layouts.	Useful for navigation, button groups, and aligning items inside components.
Can define tracks and allow items to span them.	Distributes and aligns items along a row or column.

You can use both in the same project: Grid for the overall gallery and Flexbox inside a card to align its title and button.

In-class assignment · 45–60 minutes

Build a Responsive Project Gallery

Create a portfolio gallery for a fictional designer, photographer, illustrator, or creative studio. Your design must use CSS Grid to organize at least six project cards.

What you will make

A webpage with an introduction, six project cards, and a visual style of your own.

What you will practice

Grid columns, gap, spanning, typography, colors, borders, and responsive layout.

What you will submit

index.html, style.css, and a screenshot of the browser preview.

Part A / Create the HTML

Create a folder named amde355-grid-lab and create these two files in Sublime Text: index.html and style.css.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creative Project Gallery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <header class="intro">
      <p class="eyebrow">Selected Work / 2026</p>
      <h1>Creative Projects</h1>
      <p>A collection of visual experiments, ideas, and outcomes.</p>
    </header>
    <section class="project-grid">
      <article class="project featured">
        <div class="project-image image-one"></div>
        <p class="category">01 / Identity</p>
        <h2>Project One</h2>
        <p>Describe the concept behind this project.</p>
      </article>
      <article class="project">
        <div class="project-image image-two"></div>
        <p class="category">02 / Digital</p>
        <h2>Project Two</h2>
        <p>Describe the concept behind this project.</p>
      </article>
      <article class="project">
        <div class="project-image image-three"></div>
        <p class="category">03 / Photography</p>
        <h2>Project Three</h2>
        <p>Describe the concept behind this project.</p>
      </article>
      <article class="project">
        <div class="project-image image-four"></div>
        <p class="category">04 / Editorial</p>
        <h2>Project Four</h2>
        <p>Describe the concept behind this project.</p>
      </article>
      <article class="project">
        <div class="project-image image-five"></div>
        <p class="category">05 / Research</p>
        <h2>Project Five</h2>
        <p>Describe the concept behind this project.</p>
      </article>
      <article class="project">
        <div class="project-image image-six"></div>
        <p class="category">06 / Experiments</p>
        <h2>Project Six</h2>
        <p>Describe the concept behind this project.</p>
      </article>
    </section>
  </main>
</body>
</html>

Part B / Add the CSS

Paste this starter CSS into style.css. Save both files, then open index.html in your browser.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f1f3f6;
  color: #182033;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page {
  width: min(1100px, 92%);
  margin: 40px auto;
}

.intro {
  margin-bottom: 32px;
}

.eyebrow, .category {
  color: #435cc5;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  margin: 8px 0;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.project {
  background: white;
  padding: 16px;
  border: 1px solid #dce1e9;
  border-radius: 12px;
}

.project-image {
  min-height: 180px;
  border-radius: 8px;
  background: #d9e2f4;
}

.image-one { background: #a7b8f4; }
.image-two { background: #f3c5a4; }
.image-three { background: #a8d5c4; }
.image-four { background: #e5c8ed; }
.image-five { background: #f0d88d; }
.image-six { background: #b8c5d7; }

.featured {
  grid-column: span 2;
}

.project h2 {
  margin: 6px 0;
  font-size: 1.3rem;
}

.project p:last-child {
  color: #596579;
}

.project {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.project:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(24, 32, 51, .12);
}

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

@media (max-width: 520px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
  .featured {
    grid-column: auto;
  }
}

Part C / Customize and test

Change the grid to four columns on wide screens, then decide whether three columns suit your content better.
Experiment with the gap between cards.
Keep the featured project spanning two columns on wide screens.
Personalize the color palette, typography, and card style.
Resize your browser to check the two-column and one-column layouts.
Make sure the cards remain readable and nothing overflows.

Design challenge: Make the page feel intentional. Establish hierarchy, use consistent spacing, and choose a limited palette. Do not simply copy the starter styling—make your own design decisions.

Submission checklist

HTML and CSS are in separate files.
The stylesheet is linked correctly.
The page contains at least six project cards.
You used display: grid, grid-template-columns, and gap.
One project spans multiple columns on wide screens.
The layout responds to smaller screens.
You customized the design beyond the starter styles.
You tested the page in a browser and captured a screenshot.

Submit before leaving class

Submit your index.html, style.css, and a screenshot of your browser preview through the course submission area specified by your instructor.

Be prepared to explain: What does 1fr mean? What is the difference between gap and margin? Why might you choose Grid instead of Flexbox for a project gallery?

08 / Troubleshooting

CSS does not appear

Check that both files are in the same folder and that the stylesheet filename matches exactly.

Grid overflows

Try minmax(0, 1fr) for flexible columns and check for long unbreakable content.

Featured card looks odd on mobile

Reset grid-column: auto at the narrow-screen breakpoint.

Spacing looks inconsistent

Use gap on the grid container rather than adding different margins to every card.

Quick reference

Goal	CSS
Enable Grid	`display: grid;`
Three equal columns	`grid-template-columns: repeat(3, 1fr);`
Space between items	`gap: 20px;`
Span two columns	`grid-column: span 2;`
Responsive columns	`repeat(auto-fit, minmax(220px, 1fr))`
Breakpoint	`@media (max-width: 600px) { ... }`