CSS Grid
8 lessonsAbout 48 minutesIntermediate
This part of the CSS Tutorial runs from CSS Grid Container through to CSS Subgrid. There are 8 lessons here, and working through them takes about 48 minutes at a steady pace.
It follows on from CSS Flexbox, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1CSS Grid ContainerA CSS Grid Container is an HTML element that uses the CSS Grid Layout system to arrange its child elements in rows and columns.
- 2CSS Grid ColumnsThe CSS Grid Columns property is used to define the number and size of columns in a grid layout.
- 3CSS Grid RowsThe CSS Grid Rows property is used to define the height and structure of rows in a CSS Grid layout.
- 4CSS Grid GapThe CSS Grid Gap property is used to create space between grid rows and columns.
- 5CSS Grid Layout ExampleA CSS Grid Layout combines rows, columns, and spacing to create structured and responsive web page layouts.
- 6Grid PlacementPlace items by numbered lines, named lines, and spans while keeping the source order meaningful. You will place items with numbered and named lines, spans, negative line numbers, overlapping cells, and source-order safeguards.
- 7Grid AreasDescribe page regions with named areas and understand how the auto-placement algorithm fills a grid. The chapter combines named page regions with repeat(), auto-fill, auto-fit, implicit tracks, dense packing, and the auto-placement algorithm.
- 8CSS SubgridAlign nested content to tracks defined by an ancestor grid without copying track sizes. It demonstrates sharing ancestor row or column tracks so nested cards, forms, and aligned content follow one grid definition.