Course outline
Full-Stack course / Tools and the web

A grid of sky observations

Lab

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/06-02-night-sky-grid
cd 06-02-night-sky-grid
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

A grid of sky observations

Arrange six sky-observation tiles in two neat rows of three with even spacing.

Worked example: At a 960px viewport, six tiles in three equal columns form two rows, with a visible gap between neighboring tiles.

Rules and constraints

  • Link styles.css from index.html.
  • Put exactly six <div class="sky-board__tile"> elements inside <div class="sky-board">.
  • Use CSS Grid with three equal columns and a positive gap.
  • Keep the tiles in their HTML order and avoid horizontal overflow at 960px.
  • Do not use JavaScript.

What you'll practice

  • Setting an element up as a grid container.
  • Defining equal column tracks and spacing.
  • Checking the grid structure and available width.

Run it

gonomicon fetch fs-week-1/06-02-night-sky-grid
cd 06-02-night-sky-grid
gonomicon test
gonomicon submit

Hints

  1. The board is the grid container; its six direct children are the grid items.
  2. Use three equal column tracks so each row can hold three observations.
  3. Give the board a positive gap and make sure the available width can hold three equal tracks at 960px.
PreviousNext lesson