Generation STEM
Learning LibraryCore Coding LibraryKids

Nested loops: fill a whole grid of stars

One loop draws a row. A loop inside a loop draws rows and columns — a whole grid — from just a few lines.

The big idea

A nested loop is a loop inside another loop, so for each step of the outer loop, the inner loop runs all the way through.

See it in code

1Start simple

First, watch how a loop inside a loop takes turns. For every row the outer loop holds, the inner loop runs all the way through its col values before the outer loop moves on:

python
for row in range(2):
    for col in range(3):
        print("row", row, "col", col)
Run it — the inner loop finishes before the row changes:
row 0 col 0
row 0 col 1
row 0 col 2
row 1 col 0
row 1 col 1
row 1 col 2

Row 0 runs through all three columns, then row 1 does the same. That's the whole idea: the inner loop runs fully for each step of the outer loop.

2A step further

Now use both counters to build a position. col decides how far across, row decides how far down — so every pair (row, col) becomes its own spot:

python
for row in range(2):
    for col in range(3):
        print("star at x", 100 + col * 100, "y", 120 + row * 130)
Run it — each row-and-column pair maps to an x and a y:
star at x 100 y 120
star at x 200 y 120
star at x 300 y 120
star at x 100 y 250
star at x 200 y 250
star at x 300 y 250

The y stays put while x marches across a row, then y jumps down for the next row. Hand those x's and y's to real stars and you get a grid.

3In our world

Same two loops, now on the canvas — a grid of stars, 3 rows with 4 in each. col sets the x and row sets the y, exactly like the warm-up:

python
from art import Canvas, star

screen = Canvas.create()
Canvas.fill(screen)

for row in range(3):
    for col in range(4):
        star(screen, 100 + col * 100, 120 + row * 130, size=45)
Run it — 3 rows times 4 columns makes 12 stars:
A neat 3-row by 4-column grid of twelve yellow stars on a dark navy canvas.

3 rows times 4 columns is 12 stars — and we only wrote two short loops. The outer loop ran 3 times; each time, the inner loop ran 4 times.

How two nested loops fill a grid of stars A 3 by 4 grid of stars. The outer loop steps down the three rows. For each row it holds, the inner loop runs all the way across the four columns, drawing a star at every column, before the outer loop moves down to the next row. inner loop → columns 0, 1, 2, 3 outer loop → rows 0, 1, 2
The outer loop holds a row while the inner loop runs across every column — then the outer loop drops to the next row.
The same idea, everywhere

Loops inside loops build anything with rows and columns: a game grid of enemies, the squares of a checkerboard, the pixels of an image, every seat in a theater. The outer loop counts one way, the inner loop the other.

Try it yourself

Change range(3) to range(5) for five rows. Then swap col and row in the star line and watch the grid tip on its side.

The common mistake

Using only one of the two counters. If you write star(screen, 100, 120 + row * 130, ...) and forget col, every star in a row lands in the same spot — you get a single column, not a grid. Both counters have to be in the star line.

What it unlocks

Grids build on for loops and range(), and give you the layouts behind games, art, and puzzles.

Older, or want more depth? Read the Teens version →

Related concepts