Exercises: Grid, Position & Responsive Challenge

Let's think about this for a second

This lesson steps things up a notch from the first exercise set — instead of using just one layout system, you'll combine CSS Grid, positioning, custom properties (variables), pseudo-classes/elements, and responsive breakpoints all together. It simulates a scenario you'd actually run into on a real project: "a product grid with badges that needs to be responsive." The tasks build on each other, so working through them in order makes things much easier. If you can complete this exercise, you can be confident you're able to apply most of the concepts from the Intermediate and Advanced chapters yourself.

Exercises

Task 1: Declare two CSS variables in :root — --gap: 16px and --primary: #2563eb — then on the .grid container use display: grid, grid-template-columns: repeat(3, 1fr), and gap: var(--gap). Task 2: Set position: relative on each .grid-item, then use a ::before pseudo-element to place a "NEW" badge in the top-right corner with position: absolute (background: var(--primary)). Task 3: Use the .grid-item:nth-child(odd) selector to give the odd items a different background color. Task 4: Add an @media (max-width: 600px) query that switches grid-template-columns to 1 column on narrow screens.

Declare CSS variables and use them in the grid layout
Build a badge using position: relative/absolute and the ::before pseudo-element
Use nth-child selectors and media queries to switch styles responsively

Code Example

css

/* Starter skeleton - fill in the blanks */
:root {
  /* Task 1: --gap, --primary variables */
}

.grid {
  /* Task 1: display, grid-template-columns, gap */
}

.grid-item {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  background: #f3f4f6;
}

.grid-item::before {
  /* Task 2: content: "NEW"; position: absolute; top/right; background: var(--primary) */
}

.grid-item:nth-child(odd) {
  /* Task 3: alternate background color */
}

@media (max-width: 600px) {
  .grid {
    /* Task 4: single column layout */
  }
}

You should see

On desktop you'll get a 3-column grid with cards showing a NEW badge, alternating background colors on odd/even items, and it'll automatically switch to a 1-column layout once the screen drops below 600px.

Give it 5 minutes

Work through Tasks 1-4 in order, then resize the browser window and check within 5 minutes whether the responsive breakpoint actually works.

A quick word of caution

There are two styles of media queries — mobile-first (min-width) and desktop-first (max-width) — so pick one and stay consistent within a single project instead of mixing them.