Lesson 1: What is CSS Grid?

What is CSS Grid?

CSS Grid is a powerful layout system that lets you create two-dimensional layouts with rows and columns. Think of it like a spreadsheet for your webpage – you define a grid structure, then place content into the cells.

Before CSS Grid, developers used floats, positioning, and flexbox to create layouts. These methods work, but they were never designed specifically for page layouts. CSS Grid was built from the ground up to solve layout problems, making it more intuitive and powerful.

Why Use CSS Grid?

1. Two-Dimensional Layouts

Unlike Flexbox (which is one-dimensional), CSS Grid lets you control both rows AND columns at the same time. This makes complex layouts much easier to build and maintain.

2. Less Code

What used to take dozens of lines of CSS with floats or positioning can now be done in just a few lines with Grid. Your code becomes cleaner and easier to understand.

3. Responsive by Design

CSS Grid has built-in features for responsive design. You can create layouts that automatically adapt to different screen sizes without writing complex media queries.

The Basic Concept

Every CSS Grid layout has two key parts:

Grid Container: The parent element that holds the grid (set with display: grid)
Grid Items: The children elements that go inside the grid cells

💡 Key Concept:

When you set display: grid on a container, all its direct children automatically become grid items. You don't need to do anything special to the children!

Your First Grid

Here's the simplest possible grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

This creates:

A grid container (display: grid)
Three equal columns (1fr 1fr 1fr)
20px spacing between items (gap: 20px)

✅ Try It Yourself:

The best way to understand Grid is to experiment! Use the Gridlock Holmes generator to create your first grid and see how it works.

Common Use Cases

CSS Grid is perfect for:

Page Layouts: Header, sidebar, content, footer arrangements
Card Grids: Product listings, image galleries, blog post grids
Dashboards: Multi-panel admin interfaces
Forms: Aligned labels and inputs
Complex Designs: Magazine-style layouts with overlapping elements

Grid vs. Other Methods

When to use Grid: When you need to control both rows and columns, or when you're building a page layout.

When to use Flexbox: When you're arranging items in a single direction (like a navigation bar or a row of buttons).

The truth: You'll often use both! Grid for the overall page structure, Flexbox for components within the grid.

Browser Support

CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge). It works in over 96% of browsers worldwide. For older browsers (like IE11), you'll need fallback layouts, but for most projects, Grid is safe to use today.

Next Steps

Now that you understand what CSS Grid is and why it's useful, you're ready to learn how to actually use it! In the next lesson, we'll dive into rows, columns, and how to create your first practical grid layout.

📚 Lesson 1: What is CSS Grid?