# Practice CSS Grid > Markdown edition of https://scrimbaguide.tech/docs/practice/practice-css-grid/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/practice/practice-css-grid/ Last updated: 2026-09-23 Six CSS Grid drills, from a three-column layout to a responsive card grid with no media queries and a dashboard with a collapsing sidebar. Each ships with starting code and a solution to check your work against. Run them in any Scrimba editor, free or Pro. Built for developers who know CSS but reach for Flexbox out of habit when a layout needs two dimensions. ## Before you start You should know CSS selectors, the box model, and basic Flexbox already. Keep a scrim open in another tab as scratch paper: the [Learn CSS Grid course](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro, 1.1 hrs, Per Borgen; see our [course notes](https://scrimbaguide.tech/docs/courses/css/css-grid/)) if you have a subscription, or the free [Learn HTML and CSS course](https://scrimba.com/learn-html-and-css-c0p?via=u42d4986) if not; any scrim's editor works for these drills. Learn CSS Grid's first three scrims (the intro, "Your first grid", and "Fraction units and repeat", about 11 minutes) open without a subscription; the other 14 do not. A Scrimba scrim works as a scratchpad: pause, edit the code pane, and run it to see the result. Free courses need no card, and the one-time 20% banner that appears via our links can be dismissed. ## Drills ### Drill 1: A three-column grid with gaps Turn this stacked list into three evenly sized columns with a gap. ```
One
Two
Three
``` ``` .cards { /* add grid rules */} ``` What you should see: three even boxes side by side, gaps between them, none at the outer edges. Try it: Drill 1: A three-column grid with gapsCSS (edit me).cards { /* add grid rules */ } This drill is ours, not Scrimba's, and the box above only renders CSS. To practise the same properties in a full editor with the course's own challenges, open [Learn CSS Grid on Scrimba](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro course; the free tier includes other CSS courses). ![Three equal-width cards side by side with a gap between them and no gap at the outer edges](https://scrimbaguide.tech/img/practice/css-grid-drill-1.webp) Solution ``` .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;} ``` `repeat(3, 1fr)` divides the row into three equal fractions; `gap` spaces the tracks without adding outer margin. The common mistake, `33% 33% 33%`, ignores the gap and overflows the container. ### Drill 2: A page layout with grid-template-areas Arrange a header, sidebar, main area, and footer using named areas. ```
Header
Main
``` ``` .page { display: grid; min-height: 100vh; /* define columns, rows, and areas */}header { }nav { }main { }footer { } ``` What you should see: a header on top, a narrow sidebar on the left, main filling what's left, a full-width footer at the bottom. Try it: Drill 2: A page layout with grid-template-areasCSS (edit me).page { display: grid; min-height: 100vh; /* define columns, rows, and areas */ } header { } nav { } main { } footer { } This drill is ours, not Scrimba's, and the box above only renders CSS. To practise the same properties in a full editor with the course's own challenges, open [Learn CSS Grid on Scrimba](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro course; the free tier includes other CSS courses). ![Page layout with a full-width header, a 200px sidebar beside the main area, and a full-width footer, built with grid-template-areas](https://scrimbaguide.tech/img/practice/css-grid-drill-2.webp) Solution ``` .page { display: grid; min-height: 100vh; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer";}header { grid-area: header; }nav { grid-area: sidebar; }main { grid-area: main; }footer { grid-area: footer; } ``` Each row is a string; each word names the area filling that cell, and repeating a name merges cells. Elements match by `grid-area`, not HTML order. A mismatched column count anywhere invalidates the whole declaration. ### Drill 3: Spanning rows and columns Make the first card span two columns, and the last card span two rows. ```
Wide
B
C
Tall
``` ``` .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; gap: 0.75rem;} ``` What you should see: "Wide" spanning two of the three columns on row one, "Tall" stretching through two row heights on the right. Try it: Drill 3: Spanning rows and columnsCSS (edit me).grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; gap: 0.75rem; } This drill is ours, not Scrimba's, and the box above only renders CSS. To practise the same properties in a full editor with the course's own challenges, open [Learn CSS Grid on Scrimba](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro course; the free tier includes other CSS courses). ![A card grid where one card spans two columns and another card spans two rows](https://scrimbaguide.tech/img/practice/css-grid-drill-3.webp) Solution ``` .wide { grid-column: span 2;}.tall { grid-row: span 2;} ``` `span 2` occupies two tracks from wherever auto-placement lands, without naming exact line numbers. People often try `grid-column: 2` expecting "two columns wide," but a bare number is a line position, not a count. ### Drill 4: An auto-fit, minmax card grid with no media queries Build a card grid that adds or drops columns as the viewport resizes, no `@media` rule. ```
1
2
3
4
5
``` ``` .grid { display: grid; gap: 1rem; /* columns go here */} ``` What you should see: cards at least 200px wide, wrapping onto new rows as the window narrows, stretching to fill space on wide screens. Try it: Drill 4: An auto-fit, minmax card grid with no media queriesCSS (edit me).grid { display: grid; gap: 1rem; /* columns go here */ } This drill is ours, not Scrimba's, and the box above only renders CSS. To practise the same properties in a full editor with the course's own challenges, open [Learn CSS Grid on Scrimba](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro course; the free tier includes other CSS courses). ![Five cards in a responsive grid that fits as many 200px-minimum columns as the width allows, with no media queries](https://scrimbaguide.tech/img/practice/css-grid-drill-4.webp) Solution ``` .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));} ``` `auto-fit` recalculates how many tracks fit at the current width; `minmax(200px, 1fr)` sets each track's floor while letting it grow. Swapping in `auto-fill` is the near-miss: identical with a full row but leaves empty phantom tracks with too few items. ### Drill 5: Aligning items inside grid cells Center a badge inside its cell, then push a button to the right edge of its own cell. ```
New
``` ``` .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}.cell { border: 1px solid #ccc; min-height: 80px;} ``` What you should see: "New" centered inside its box, and "Save" sitting against the right edge of its box rather than stretched across it. Try it: Drill 5: Aligning items inside grid cellsCSS (edit me).grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .cell { border: 1px solid #ccc; min-height: 80px; } This drill is ours, not Scrimba's, and the box above only renders CSS. To practise the same properties in a full editor with the course's own challenges, open [Learn CSS Grid on Scrimba](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro course; the free tier includes other CSS courses). ![Two grid cells: a yellow New badge centered in the first cell and a Save button aligned to the right edge of the second](https://scrimbaguide.tech/img/practice/css-grid-drill-5.webp) Solution ``` .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; place-items: center;}.save { justify-self: end;} ``` `place-items: center` centers content on both axes for every cell at once; `justify-self` overrides that on one item. The Flexbox habit is reaching for `align-items` alone and wondering why content is only centered vertically. ### Drill 6: A dashboard with a spanning panel and a collapsing sidebar Build a dashboard where the stats panel spans two rows, and the sidebar drops above the content past 700px. ```
Stats (tall)
Chart
Recent activity
``` ``` .dashboard { display: grid; gap: 1rem; /* layout and responsive rules go here */} ``` What you should see: a sidebar beside a two-column panel area with stats spanning both rows; under 700px, the sidebar sits above one stacked column. Try it: Drill 6: A dashboard with a spanning panel and a collapsing sidebarCSS (edit me).dashboard { display: grid; gap: 1rem; /* layout and responsive rules go here */ } This drill is ours, not Scrimba's, and the box above only renders CSS. To practise the same properties in a full editor with the course's own challenges, open [Learn CSS Grid on Scrimba](https://scrimba.com/learn-css-grid-c02k?via=u42d4986) (Pro course; the free tier includes other CSS courses). ![Dashboard layout with a two-row sidebar, a two-row stats panel, and Chart and Recent activity stacked in the third column](https://scrimbaguide.tech/img/practice/css-grid-drill-6.webp) Solution ``` .dashboard { display: grid; gap: 1rem; grid-template-columns: 200px repeat(2, 1fr); grid-template-rows: repeat(2, minmax(120px, auto));}.sidebar { grid-row: span 2;}.stats { grid-row: span 2;}@media (max-width: 700px) { .dashboard { grid-template-columns: 1fr; } .sidebar, .stats { grid-row: auto; }} ``` Both `.sidebar` and `.stats` get `grid-row: span 2` to stretch through two rows. Below 700px, a single column makes "span 2" meaningless, so it resets to `auto` in the media query. Forgetting that reset is the usual bug: the spans stay active and swallow rows the other panels needed. ## Common mistakes - Percentages instead of `fr` units. Percentages ignore `gap` and overflow the container. - Mismatched `grid-template-areas` strings. Row and column counts must match, or the declaration is dropped. - Confusing `auto-fit` and `auto-fill`. `auto-fit` collapses empty tracks; `auto-fill` keeps them, leaving gaps. - Leaving spans active after a collapse. A `span 2` written for a multi-column layout needs resetting to `auto` at the single-column breakpoint. ## Where to practice next on Scrimba CSS Grid sits inside the [frontend developer path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/). | Course | What it drills | Access | Length | | --- | --- | --- | --- | | [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/) | 17 scrims that map onto these drills: `grid-template-columns` and `fr` (Drill 1), template areas (Drill 2), `span` and `-1` line numbers (Drill 3), `repeat(auto-fit, minmax())` (Drill 4), `justify-items` and `align-items` (Drill 5). No graded challenges; Per asks you to pause and change the values. Three scrims free, then Pro; the BBC News clone solo project is Pro | Pro | 1.1 hrs | | [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/) | Module 5, CSS Grid (97 min, 19 scrims): one property per scrim, `grid-template-areas` redrawn inside a media query, and `repeat(auto-fill, minmax(200px, 1fr))` with no media query at all. Four sample scrims free, the other 170 Pro | Pro | 15.1 hrs | | [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/) | The box model, classes, margins and padding, and flexbox, taught inside a Google clone, a business card and a birthday site. No grid. All six modules free; Pro gates three Solo Projects | Free | 5.7 hrs | | [Intro to UI Design Fundamentals](https://scrimbaguide.tech/docs/courses/css/ui-design-fundamentals/) | White space, alignment, contrast and scale on cards, a hero and a dashboard fragment; the final challenge is nine lines of CSS starting with `grid-gap: 2em`. All 20 scrims and five challenges free | Free | 1.2 hrs | ## Related practice guides - [Practice CSS Flexbox](https://scrimbaguide.tech/docs/practice/practice-flexbox/): pair with Grid for one-dimensional alignment. - [Practice Tailwind CSS](https://scrimbaguide.tech/docs/practice/practice-tailwind-css/): the same concepts as utility classes. - [Practice Coding on Scrimba](https://scrimbaguide.tech/docs/practice/): the full index of drill pages. **Q: Do I need to know Flexbox before learning CSS Grid?** Not strictly, but it helps. Grid handles two dimensions at once; Flexbox handles one. Most layouts use both: Grid for structure, Flexbox for aligning items inside a cell. **Q: Why did my grid-template-areas declaration stop working?** Usually a mismatch between the area names in each row string and the columns in grid-template-columns. Every row needs as many names as columns, or the browser ignores the property. **Q: Is CSS Grid worth learning with Tailwind's grid utilities available?** Yes. Tailwind's grid classes wrap the same CSS Grid properties, so the underlying model makes the utility classes click, and it is the only option for custom areas Tailwind has no class for. **Q: How long does it take to get comfortable with CSS Grid?** Most people who know CSS layout basics get functional with Grid in a few focused hours, enough to build layouts like the ones above. ## Practice Grid inside a real course Start in the free HTML and CSS course, no card required. Learn CSS Grid itself is a Pro course. **[Try Scrimba free](https://scrimba.com/?via=u42d4986)** ### Related Guides - [Scrimba for Designers](https://scrimbaguide.tech/docs/for/designers/) - [Practice Flexbox](https://scrimbaguide.tech/docs/practice/practice-flexbox/) - [Frontend Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)