01 / What Is CSS Grid?

Last week, you learned how Flexbox arranges elements along a row or column. CSS Grid builds on those ideas by allowing you to organize a layout across both rows and columns at the same time.

Think about a photography portfolio, an online magazine, or a gallery of student projects. These designs often use carefully arranged rows and columns to organize many different pieces of content.

02 / Grid Container and Grid Items

Like Flexbox, Grid starts with a parent element. You turn that parent into a grid container, and its direct children become grid items.

.grid-container {
  display: grid;
  grid-template-columns:
    1fr 1fr 1fr;
  gap: 16px;
}

<div class="grid-container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

03 / Create Your First Grid

Let’s start with a simple three-column layout. The grid-template-columns property tells the browser how many columns to create and how much space each column should receive.

<div class="gallery">
  <div class="tile">Project One</div>
  <div class="tile">Project Two</div>
  <div class="tile">Project Three</div>
  <div class="tile">Project Four</div>
  <div class="tile">Project Five</div>
  <div class="tile">Project Six</div>
</div>

.gallery {
  display: grid;
  grid-template-columns:
    1fr 1fr 1fr;
  gap: 16px;
}

.tile {
  padding: 30px 15px;
  background-color: #edf2ff;
  text-align: center;
  border: 1px solid #dfe4ee;
}

The result is a grid with three equal columns. Since there are six items, the browser places three in the first row and three in the second row.

04 / Understanding the fr Unit

You will often see fr used in CSS Grid. It stands for a fraction of the available space in the grid container, after fixed sizes and gaps are accounted for.

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

grid-template-columns:
  2fr 1fr;

grid-template-columns:
  1fr 260px;

05 / Control Spacing with gap

Grid uses the gap property to control the space between columns and rows. This is often cleaner than adding margins to each individual item.

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

The repeat(3, 1fr) expression is a shortcut for creating three equal columns. It does the same job as 1fr 1fr 1fr.

.gallery {
  row-gap: 32px;
  column-gap: 16px;
}

Use a larger row gap when you want more separation between rows than between columns.

06 / Create a Responsive Grid

A fixed three-column grid may become cramped on a phone. One way to improve it is to use a media query to reduce the number of columns at narrower widths.

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

@media (max-width: 700px) {
  .gallery {
    grid-template-columns:
      repeat(2, 1fr);
  }
}

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

This layout starts with three columns, changes to two columns below 700 pixels, and becomes one column below 450 pixels.

07 / A More Flexible Grid with minmax()

CSS Grid can also create flexible columns without requiring you to specify every breakpoint. The combination of repeat(), auto-fit, and minmax() is especially useful for image galleries and project cards.

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

Here is what each part means:

• repeat() repeats a column pattern.
• auto-fit fits as many columns as the available space allows.
• minmax(220px, 1fr) gives each column a preferred minimum of 220 pixels and allows it to grow into available space.

This is a useful technique for galleries because the browser can change the number of columns as the container gets wider or narrower. The actual number of columns depends on the available width and the gap.

08 / Grid Can Control the Whole Page

Grid is not limited to galleries. It can also organize larger page areas, such as a main content column beside a sidebar.

<div class="page-layout">
  <main class="main-content">
    <h1>Creative Journal</h1>
    <p>The main story or article goes here.</p>
  </main>

  <aside class="sidebar">
    <h2>Related Links</h2>
    <p>Supporting information goes here.</p>
  </aside>
</div>

.page-layout {
  display: grid;
  grid-template-columns:
    2fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.main-content, .sidebar {
  padding: 24px;
  background-color: #f3f5fa;
}

@media (max-width: 650px) {
  .page-layout {
    grid-template-columns:
      1fr;
  }
}

The main content gets a larger share of the space, while the sidebar gets a smaller share. On a narrow screen, the media query stacks the two areas into one column.

09 / Grid or Flexbox?

Both tools are useful. You do not need to choose one for your entire website. You can use Grid for the overall content layout and Flexbox for navigation or for aligning items inside individual components.

10 / In-Class Assignment: Design a Portfolio Grid

Create a simple portfolio page for an artist, photographer, illustrator, designer, or fictional creative studio. Your page should display a collection of projects in a clean grid.

Your page must include:

• A page title and short introduction.
• A semantic main content area.
• A gallery containing at least six project items.
• A CSS Grid layout with at least three columns on a wide screen.
• Consistent gaps between cards.
• A heading or caption for each project.
• A responsive layout that adjusts to narrower screens.
• A footer with a credit or contact link.

You may use placeholder images while testing your layout. If you use real images, make sure they are appropriate to use and include descriptive alt text.

Starter HTML

<header>
  <h1>Selected Work</h1>
  <p>A collection of creative projects.</p>
</header>

<main>
  <section class="project-grid">

    <article class="project-card">
      <img
        src="https://placehold.co/600x400"
        alt="Placeholder for project one">
      <h2>Project One</h2>
      <p>A short project description.</p>
    </article>

    <article class="project-card">
      <img
        src="https://placehold.co/600x400"
        alt="Placeholder for project two">
      <h2>Project Two</h2>
      <p>A short project description.</p>
    </article>

    <article class="project-card">
      <img
        src="https://placehold.co/600x400"
        alt="Placeholder for project three">
      <h2>Project Three</h2>
      <p>A short project description.</p>
    </article>

    <!-- Add at least three more project cards. -->

  </section>
</main>

<footer>
  <p>Created by Your Name</p>
</footer>

Starter CSS

* {
  box-sizing: border-box;
}

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

header, main, footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

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

.project-card {
  padding: 16px;
  background-color: #f3f5fa;
  border: 1px solid #dfe4ee;
  border-radius: 10px;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
}

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

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

Complete the HTML by adding at least three more project cards. Then customize the visual design using your own colors, typography, borders, and spacing.

11 / Independent Practice

After finishing the guided gallery, create a second layout using CSS Grid. Choose a subject that interests you and design a page that benefits from rows and columns.

1. Choose a concept.
   Consider an artist portfolio, music collection, editorial page, image archive, or product gallery.
2. Sketch your layout.
   Decide how many columns you need and which content belongs in each area.
3. Build your HTML.
   Use semantic elements to organize your content into meaningful sections or cards.
4. Create your grid.
   Use display: grid;, grid-template-columns, and gap to build the layout.
5. Make it responsive.
   Use media queries or experiment with repeat(auto-fit, minmax(…)) to adapt the number of columns.
6. Refine and test.
   Check the page at different widths and correct any cramped text, overflowing images, or awkward spacing.

12 / What to Submit

Submit the following through the designated D2L assignment area:

• A link to your completed CodePen project.
• A screenshot of your finished grid layout.
• A short reflection of approximately 100–150 words.

Reflection questions

• How many columns did you create, and why did you choose that layout?
• How did you use fr, repeat(), or gap?
• What changes did you make for smaller screens?
• When might you choose Grid instead of Flexbox for a future project?

13 / Final Checklist

• I understand the difference between a grid container and grid items.
• I used display: grid; on the correct parent element.
• I created columns using grid-template-columns.
• I used fr or repeat() to define column sizes.
• I used gap to create consistent spacing.
• My gallery contains at least six project items.
• My images resize within their cards.
• My layout adapts to smaller screens.
• I tested my page and submitted the project link, screenshot, and reflection.