Stage 2: The Dancer Grid

UNIT

STEP 1

What Is CSS Grid?

CSS Grid is a layout system built for two-dimensional arrangements, rows and columns at the same time. You have already used Flexbox, which controls items along a single axis. Grid controls both axes simultaneously, making it ideal for card layouts, photo galleries, and any design where items need to line up both across and down the page.

The key property is grid-template-columns. It defines how many columns the grid has and how wide each one is. The value repeat(3, 1fr) tells the browser: create three columns, each taking one equal fraction of the available space.

/* display: grid, three equal columns */

Six items, three columns, two rows, the browser figures out the row count automatically. All you define is the column structure.

Grid vs. Flexbox

Use Flexbox when items flow in one direction (a nav bar, a hero with text and image). Use Grid when you want a structured two-dimensional layout (a card gallery, a calendar). Both are valuable, knowing when to reach for each one is a core web development skill.

STEP 2

Add the Dancers Section CSS

Find </style> in your editor and add this CSS just above it, after the #hero a block:

👉 Add inside <style>, just above </style>: #dancers {
  background: #0f0f1a;
  padding: 80px 40px;
}

#dancers h2 {
  font-size: 2rem;
  color: white;
  text-align: center;
  margin-bottom: 12px;
}

#dancers .section-intro {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: 48px;
}

.dancers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.dancer-card {
  background: #1a1237;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  height: 420px;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.card-label {
  width: 100%;
  padding: 20px;
  color: white;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

STEP 3

Add the Dancers Section HTML

Find </body> and add this new section just above it, after the closing </section> of the hero:

👉 Add just above </body>: <section id="dancers">
  <h2>The Dances</h2>
  <p class="section-intro">Six dance traditions of the Lakota, Dakota, and Ojibwe peoples. Click any dancer to learn more.</p>
  <div class="dancers-grid">

    <div class="dancer-card">
      <span class="card-label">Jingle Dress</span>
    </div>

    <div class="dancer-card">
      <span class="card-label">Fancy Shawl</span>
    </div>

    <div class="dancer-card">
      <span class="card-label">Women's Traditional</span>
    </div>

    <div class="dancer-card">
      <span class="card-label">Grass Dance</span>
    </div>

    <div class="dancer-card">
      <span class="card-label">Men's Traditional</span>
    </div>

    <div class="dancer-card">
      <span class="card-label">Men's Fancy</span>
    </div>

  </div>
</section>

STEP 4

Why These Styles?

background: #0f0f1a on #dancers, an almost-black deep navy, even darker than the hero. The cards sit against this background, and the contrast is intentional: the illustrated dancer images in the next stage are colorful and luminous. A very dark backdrop makes them glow.
display: grid on .dancers-grid, turns the container into a grid parent. Every direct child becomes a grid item automatically.
grid-template-columns: repeat(3, 1fr), creates three equal columns. repeat(3, ...) is shorthand for writing 1fr 1fr 1fr. The fr unit means "fraction of available space", each column gets exactly one third.
gap: 24px, sets the space between grid items in both directions. One value applies to both row gaps and column gaps.
height: 420px on .dancer-card, a fixed height that gives each card a consistent tall portrait shape. Dancer illustrations are vertical by nature.
position: relative on .dancer-card, prepares the card to be a positioning context. In the next stage, the dancer image will be positioned absolutely inside it.
display: flex; align-items: flex-end on .dancer-card, pushes the dance name label to the bottom of the card, where it will sit over the dancer's feet.

Stage 2 Complete!

Your page now has a dark grid of six placeholder cards. In Stage 3 you will add the dancer illustration images, the PNGs saved in the assets folder, and update the card styles so each image fills the card and the dance name stays readable at the bottom.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Dancing in Step</title>
  <style>

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: Georgia, serif;
      background: #faf8f5;
      color: #1a1a1a;
    }

#hero {
      background: #1a1237;
      color: white;
      padding: 80px 40px;
    }

#hero h1 {
      font-size: 3rem;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

#hero .tagline {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.65);
      font-style: italic;
      margin-bottom: 32px;
    }

#hero p {
      font-size: 1.0625rem;
      line-height: 1.8;
      max-width: 680px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 28px;
    }

#hero a {
      color: #d4a853;
      font-size: 1rem;
    }

</style>
</head>
<body>

<section id="hero">
    <h1>Dancing in Step</h1>
    <p class="tagline">Powwow regalia and dance traditions of the Lakota, Dakota, and Ojibwe peoples</p>
    <p>Powwow is a gathering. The drum sits at the center of the arena and everything &mdash; the dancers, the families, the songs &mdash; moves around it. For the Lakota, Dakota, and Ojibwe peoples, powwow is a living tradition: a space where culture is practiced, passed forward, and celebrated together.</p>
    <a href="https://americanindian.si.edu" target="_blank">Learn more: Smithsonian National Museum of the American Indian &rarr;</a>
  </section>

</body>
</html>

Live Preview