Unit 4 · Stage 1

The Grid Foundation

In earlier units you built pages with HTML and styled them with CSS. This unit adds a powerful new layout tool: CSS Grid. You will use it to build a seasonal calendar. The editor already has your page started. Play with it, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. You already know how to write a <style> block and CSS rules like body { ... }. Any property you have learned lives in the 📖 Glossary at the top. This stage adds one new idea: the grid.

1 What is CSS Grid?

Flexbox, from Unit 2, arranges things in a single row or column. Grid works in two directions at once, rows and columns, so it is perfect for a calendar. You turn any element into a grid, then tell it how many columns to make.

🗓️ Why a calendar? Tribal nations across Minnesota, North Dakota, and South Dakota have always organized life around the seasons. The Anishinaabe recognize six seasons; the Dakota and Lakota track seasonal cycles tied to star knowledge, buffalo movements, and the wild rice harvest. A calendar built in code is a way of honoring that relationship with time.

2 Your page is already set up

Look at the editor. The skeleton, the page title, and the base styles for the body and the <h1> are already there, the same kinds of rules you wrote in Unit 2.

What is already in your editor

body { ... }: Sets the page font to Arial, removes the default margin, adds padding, and gives a soft green-gray background (#f0f4f0) that feels outdoors before you add any images.
h1 { ... }: Centers the title and makes it large. You will add your grid below these rules.

3 Create the grid

Add a .calendar-grid rule that turns a container into a grid, then add the container itself with four season cards inside.

What this code means

display: grid: Turns the element into a grid. Its direct children now become grid cells that follow grid rules.
grid-template-columns: repeat(4, 1fr): Makes four equal columns. repeat(4, ...) is shorthand for writing the value four times. 1fr means one fraction of the space, so each column gets 25%.
gap: 20px: Adds 20px of space between every cell, across and down, so the cards do not touch.

✍️ Add the .calendar-grid rule inside <style>, and add the <div class="calendar-grid"> with four <div class="season"> cards inside the <body>. Use the example below, then press ▶ Run.

/* add this inside <style> */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

<!-- add this inside <body>, under the h1 -->
<div class="calendar-grid">
  <div class="season">Season 1</div>
  <div class="season">Season 2</div>
  <div class="season">Season 3</div>
  <div class="season">Season 4</div>
</div>

🤔 Quick check before you go on

What CSS value turns an element into a grid? Type it, then press Submit to unlock the last step.

4 Style the season cards

Right now the four cells are invisible. Give each one a white background, padding, rounded corners, and a minimum height so they look like real cards.

What this code means

background-color: white: Makes each card stand out against the green-gray page, like a paper card on a table.
border-radius: 8px: Rounds the corners. A little rounding feels natural and organic instead of rigid.
min-height: 200px: Keeps each card at least 200px tall, so empty cards do not collapse. It grows taller if there is more content.

✍️ Add a .season rule with a white background, padding, rounded corners, and a minimum height. Use the example below, then press ▶ Run.

.season {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  min-height: 200px;
}

5 Make it your own

Experiment, then set it back the way you like it.

Change repeat(4, 1fr) to repeat(2, 1fr) and press Run to see two columns.
Change gap to 40px, then 5px.
Change min-height to 300px.

✓ Finish this stage

To complete Stage 1, your page needs a .calendar-grid with four columns and styled .season cards. Press Check my work when you are ready. This opens Stage 2 and lets your teacher see that you finished.

YOUR CODE

PREVIEW