Sample Video Frame

Created by Zed A. Shaw Updated 2024-02-17 04:54:36

08: Grid Basics

The CSS grids start off the same way as Flexbox by using the display: grid property on a parent tag, and then the same setup of parent and child properties to control layout. The difference is that CSS grids are more for uniform layout.

I'm using the word "uniform" but that doesn't mean all of the cells need to be the same size. Uniform actually means that there are X columns by Y rows, even if each can have different sizes.

Simple 2D Uniform Grids

The simplest grid is where you give a parent tag the display: grid property and then specify how the grid is formed with grid-template-columns, grid-template-rows, and grid-template-areas.

Previous Lesson Next Lesson

Register for Learn JavaScript the Hard Way

Register today for the course and get the all currently available videos and lessons, plus all future modules for no extra charge.