CSS Grid

What is CSS Grid?

CSS Grid is a layout system used to arrange elements in rows and columns.

It is best for two-dimensional layouts, meaning layouts that need both rows and columns.

Grid Container

The parent element becomes a grid container when you apply display: grid;.

The direct children inside that container become grid items.

Grid Items

Grid items are the direct child elements inside a grid container.

Grid Columns

Use grid-template-columns to define how many columns the grid has and how wide each column should be.

Grid Rows

Use grid-template-rows to define the height of rows.

The fr Unit

The fr unit means a fraction of the available space.

For example, 1fr 2fr means the second column gets twice as much space as the first.

Gap

The gap property adds space between grid rows and columns.

Repeat

The repeat() function helps you avoid repeating the same column or row value many times.

Placing Grid Items

You can control where an item appears using grid-column and grid-row.

Grid Areas

grid-template-areas lets you create named sections for a page layout.

Responsive Grid

A responsive grid adjusts automatically based on screen size.

auto-fit and minmax() are useful for flexible card layouts.

Full Example

Why CSS Grid is Important

• Creates two-dimensional layouts
• Works with rows and columns
• Great for page layouts and card grids
• Pairs well with Flexbox

Common Mistakes

• Forgetting display: grid;
• Confusing Flexbox and Grid
• Forgetting to use gap
• Using fixed columns that break on small screens

Practice

Create a three-column grid layout with six cards and a 20px gap.

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic