# CSS Grid

Lay out rows and columns at the same time with CSS Grid: place items by line or by named area, build galleries that fill the space with no media query, line up cards with subgrid, and learn when to choose flexbox and when grid.

Updated: November 10, 2026

## [Grid Basics](https://www.ask-codey.com/courses/css-in-depth/topics/css-grid-basics-topic)

1. [CSS Grid: Rows and Columns](https://www.ask-codey.com/lessons/css-grid-basics) (Apprentice): CSS Grid turns a box into an ice cube tray of rows and columns, so a photo gallery, a product page or a calendar lines up both ways at once with a few lines of CSS.
2. [Placing Items: Lines, Spans and Named Areas](https://www.ask-codey.com/lessons/css-grid-placement-and-areas) (Journeyman): Put any grid item exactly where you want it, by the numbered lines around its cells or by drawing the whole page as named areas, so a featured photo can fill four cells and a sidebar can sit beside the main content.

## [Grids That Adapt](https://www.ask-codey.com/courses/css-in-depth/topics/css-grids-that-adapt)

1. [Grids That Fill the Space: repeat(), minmax() and auto-fit](https://www.ask-codey.com/lessons/css-grid-auto-fit-minmax) (Journeyman): One line of CSS, repeat(auto-fit, minmax(14rem, 1fr)), makes a gallery that shows one column on a phone, four on a laptop and more on a wide screen, with no media query at all.
2. [Subgrid: Lining Up Cards](https://www.ask-codey.com/lessons/css-subgrid) (Freelancer): With grid-template-rows: subgrid, cards in a row share their parent grid's rows, so every card's title, text and button line up across the row however long each card's text is.

## [Flexbox or Grid?](https://www.ask-codey.com/courses/css-in-depth/topics/css-flexbox-or-grid-topic)

1. [Flexbox or Grid? Choosing the Right Tool](https://www.ask-codey.com/lessons/css-flexbox-or-grid) (Journeyman): Flexbox lines things up in one direction and lets the content set the sizes, grid lays out rows and columns you plan first, and positioning lifts one thing on top, so three questions tell you which fits each part of a page.

## [Exercise: A Photo Gallery Grid](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-photo-gallery-grid)

1. [Exercise: A Photo Gallery Grid](https://www.ask-codey.com/lessons/exercise-css-photo-gallery-grid) (Journeyman): Lay out Trail Photo Club's page with CSS Grid, from named page areas to a gallery that fits any width, a photo of the month that covers four cells and cards lined up with subgrid, and let the tests check each step.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-grid-layout