AMDE 355 · Advanced Web Design</div><h2>CSS Grid: Design Better Layouts</h2><p>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.</p><div class="ag-chips">CSS GridSublime TextResponsive designIn-class lab</div></header>
01 / Learning objectives
1</div><h3>Understand the grid</h3><p>Identify grid containers, grid items, rows, and columns.</p></div><div class="ag-card"><div class="ag-number">2</div><h3>Control layout</h3><p>Use column definitions, fractions, gaps, and spanning.</p></div><div class="ag-card"><div class="ag-number">3</div><h3>Design responsively</h3><p>Create layouts that adapt to different viewport sizes.</p></div><div class="ag-card"><div class="ag-number">4</div><h3>Build a real page</h3><p>Write HTML and CSS in Sublime Text and test in a browser.</p></div></div><div class="ag-callout">Big idea: CSS Grid is a two-dimensional layout system. It helps you organize content across both rows and columns.</div></section>
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></div><div class="ag-code">.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.grid-item { padding: 30px; background: #e5edff; border: 1px solid #b7c9f5; }</code></div><div class="ag-demo-grid">OneTwoThreeFourFiveSix</div><div class="ag-grid"><div class="ag-card"><h3>display: grid</h3><p>Turns the element into a grid container.</p></div><div class="ag-card"><h3>repeat(3, 1fr)</h3><p>Creates three equal-width columns.</p></div><div class="ag-card"><h3>gap: 16px</h3><p>Creates consistent space between grid items.</p></div></div></section>
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;</div><div class="ag-demo-grid">111</div></div><div class="ag-card"><h3>Two equal columns</h3><div class="ag-code">grid-template-columns: repeat(2, 1fr);</div><div class="ag-demo-grid" style="grid-template-columns:repeat(2,1fr)">11</div></div><div class="ag-card"><h3>Unequal columns</h3><div class="ag-code">grid-template-columns: 2fr 1fr;</div><div class="ag-demo-grid" style="grid-template-columns:2fr 1fr">2fr1fr</div></div></div><div class="ag-callout">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.</div></section>
04 / Rows and spacing
Define rows
grid-template-rows: 150px 200px;</div><p>This defines two explicit rows. Additional content may create implicit rows.</p></div><div class="ag-card"><h3>Set the gap</h3><div class="ag-code">gap: 20px;</div><p>Sets both row and column gaps to 20 pixels.</p></div><div class="ag-card"><h3>Different spacing</h3><div class="ag-code">row-gap: 24px;
column-gap: 16px;</div><p>Use separate values when vertical and horizontal spacing need to differ.</p></div></div><p class="ag-muted">For card layouts, let content determine row height when possible. Fixed row heights can cause text or images to overflow.</p></section>
05 / Make an item span columns
A featured project can occupy two columns while the other cards occupy one.
.featured {
grid-column: span 2;
}</div><div class="ag-demo-grid">Featured projectProject 2Project 3Project 4</div><p>To span two rows instead, use grid-row: span 2;. Use spanning to establish hierarchy, not just decoration.</p></section>
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;
}</div><div class="ag-grid"><div class="ag-card"><h3>auto-fit</h3><p>Fits as many columns as the available space allows.</p></div><div class="ag-card"><h3>minmax(220px, 1fr)</h3><p>Each column aims to be at least 220px wide and can grow to share the available space.</p></div><div class="ag-card"><h3>Responsive result</h3><p>Wide screens show more columns; narrow screens show fewer.</p></div></div><p>Another approach is to use media queries when you want precise control at particular breakpoints.</p></section>
07 / Grid or Flexbox?
MADTINKERBLOCKTOKEN0END</div><div class="ag-callout ag-green">You can use both in the same project: Grid for the overall gallery and Flexbox inside a card to align its title and button.</div></section>
In-class assignment · 45–60 minutes</div><h2>Build a Responsive Project Gallery</h2><p>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.</p></header><div class="ag-grid"><div class="ag-card"><h3>What you will make</h3><p>A webpage with an introduction, six project cards, and a visual style of your own.</p></div><div class="ag-card"><h3>What you will practice</h3><p>Grid columns, gap, spanning, typography, colors, borders, and responsive layout.</p></div><div class="ag-card"><h3>What you will submit</h3><p>index.html, style.css, and a screenshot of the browser preview.</p></div></div><h3>Part A / Create the HTML</h3><p>Create a folder named amde355-grid-lab and create these two files in Sublime Text: index.html and style.css.</p><div class="ag-code"><!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></div><h3>Part B / Add the CSS</h3><p>Paste this starter CSS into style.css. Save both files, then open index.html in your browser.</p><div class="ag-code">* {
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;
}
}</code></div><h3>Part C / Customize and test</h3><ol class="ag-steps"><li>Change the grid to four columns on wide screens, then decide whether three columns suit your content better.</li><li>Experiment with the gap between cards.</li><li>Keep the featured project spanning two columns on wide screens.</li><li>Personalize the color palette, typography, and card style.</li><li>Resize your browser to check the two-column and one-column layouts.</li><li>Make sure the cards remain readable and nothing overflows.</li></ol><div class="ag-callout">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.</div><h3>Submission checklist</h3><ul class="ag-checklist"><li>HTML and CSS are in separate files.</li><li>The stylesheet is linked correctly.</li><li>The page contains at least six project cards.</li><li>You used display: grid, grid-template-columns, and gap.</li><li>One project spans multiple columns on wide screens.</li><li>The layout responds to smaller screens.</li><li>You customized the design beyond the starter styles.</li><li>You tested the page in a browser and captured a screenshot.</li></ul><h3>Submit before leaving class</h3><p>Submit your index.html, style.css, and a screenshot of your browser preview through the course submission area specified by your instructor.</p><p>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?</p></section>
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
MADTINKERBLOCKTOKEN1END</div></section>