Introduction to CSS Grid

CSS Grid is a powerful two-dimensional layout system for creating complex layouts.

What is CSS Grid?

Grid allows you to:

• Create rows AND columns simultaneously
• Place items precisely in cells
• Build complex layouts with simple CSS
• Create responsive designs easily

Creating a Grid Container

Add display: grid to create a grid:

Interactive Grid Playground

Grid vs Flexbox

Grid Terminology

• Track: A row or column
• Cell: The space between grid lines
• Gap: Space between cells
• Line: The dividing lines (numbered from 1)

The fr Unit

fr means "fraction of available space":

The middle column gets 2 parts, sides get 1 part each.

Practical: Photo Gallery

Exercise: Create a Grid

Add display: grid and create 3 columns: