Learn CSS with Games: Flexbox Froggy and Grid Garden

Start with Flexbox Froggy to practise alignment along an axis, then use Grid Garden to practise placing an item between grid lines. After each game exercise, reproduce the idea in a small page of your own. A useful result is being able to explain why a declaration works when the layout changes, rather than remembering a particular level's answer.

How to learn CSS with games, then apply it

This route combines two games with three original exercises. It suits someone who can read a simple CSS rule and wants visible feedback. It is not a complete web-development course: real interfaces also need readable content, responsive behavior, keyboard access and testing with different amounts of text.

Pick the right exercise for your question

The games are by Codepip. Cozcade links each hosted game to its matching guide: Flexbox Froggy and its guide; Grid Garden and its guide. The original Froggy and Grid Garden pages provide the authors' own versions. Use a keyboard when following the code exercises here.

First, name the axis before choosing a property

Flexbox has a main axis and a cross axis. flex-direction sets the main direction; justify-content positions items along that main axis, while align-items concerns the cross axis. In a normal left-to-right row, the main axis is horizontal. Change the direction to a column and it becomes vertical. These definitions are covered in MDN's Flexbox introduction.

Before trying declarations in Froggy, say which direction you want the items to move. Then name that direction in relation to the current main axis. This turns a wrong answer into a specific question: did you choose the wrong property, the wrong value, or the wrong axis?

Exercise 1: move a group to the end

Create three small items inside a container. This is an original exercise, not a copied game level or answer key.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Your goal is to move the three items together toward the right edge without changing their order or giving each item a separate margin. Predict the result, then add justify-content: flex-end to the container.

Now compare it with justify-content: space-between. The first choice moves the group; the second distributes the available space between the items. Try a narrow and a wide container. Explain which version you would choose for three buttons that should remain close together. The visible result matters more than remembering one value.

Exercise 2: keep the same instruction, change the axis

Reuse that container, add flex-direction: column, set height: 12rem, and keep justify-content: flex-end. The items now collect toward the bottom. Your declaration did not become a “move right” command: it still works along the main axis, which you changed.

Next, add align-items: flex-start. Compare the arrangement before and after that addition. With the specified left-to-right direction, the items align toward the left on the cross axis. Remove the declaration and observe the default stretching behavior again.

Write a short explanation of both changes without using “it just works.” For example, identify the axis, the free space, and the group being positioned. If you cannot explain a result, reduce the example to two items and change only one declaration at a time. This is the habit to take back into the game.

Next, distinguish a grid track from its boundary

Grid placement uses lines surrounding rows and columns. Five explicit columns have six boundary lines. An item placed from column line 3 to line 5 spans two columns, not three. See MDN's Grid introduction for the distinction between tracks, cells and lines.

In Grid Garden, read the start and end boundaries before trying a position. In your own page, draw or label the boundaries if counting the spaces is confusing.

Exercise 3: place a card between two lines

Build a five-column board and give it one card:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Predict where the card will appear before opening the page. Then make it span the full board by changing only its column placement. With the five explicit columns above, grid-column: 1 / 6 reaches from the first boundary to the last.

Finally, change the text to a much longer sentence and make the browser narrow. The placement rule can remain correct while the card's fixed-height presentation becomes unsuitable for its content. Solving a game exercise teaches one part of layout; building a usable page requires checking the content too.

Use game progress as feedback, not as proof of mastery

After a successful exercise, change one assumption: the direction, number of items, available width or text length. Predict the result before looking. If you can adapt the idea and explain the change, you have learned more than a level answer.

When returning to a game, check that you are opening the same version and browser environment. Cozcade account favorites identify games you want to revisit; they are not a promise that a game's internal lesson progress transfers between devices. Avoid deleting stored site data while investigating progress, and use an explicit export feature only if that particular game provides one.

Continue with the matching guide

Use the Froggy guide for axis and alignment practice and the Grid Garden guide for placement questions. If you want another type of practice afterward, browse the learning games.

The exercises above were written for this article. The reference pages were checked on October 11, 2026. Our recorded gameplay checks cover a small number of desktop interactions, not completion of all levels or a full mobile course. This article teaches a practice sequence; it does not award a qualification or replace testing your own interfaces.

Games you can play on Cozcade

Flexbox FroggyGrid Garden