Getting Started with CSS Grid

CSS Grid is a powerful layout system that allows you to create complex two-dimensional layouts with ease. Unlike Flexbox, which is primarily one-dimensional, Grid gives you control over both rows and columns simultaneously.

Why CSS Grid?

Before CSS Grid, creating complex layouts required hacky solutions using floats, tables, or complex Flexbox arrangements. Grid simplifies this dramatically.

Key Benefits

• Two-dimensional control - Control both rows and columns at once
• Gap support - Native spacing between items
• Alignment - Powerful alignment capabilities
• Named areas - Create layouts using named template areas

Basic Grid Setup

Here's a simple example to get you started:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

This creates a three-column layout with equal-width columns and 20px gaps between items.

Grid Template Areas

One of the most powerful features of CSS Grid is named template areas:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

This creates a classic layout with a header, sidebar, main content area, and footer.

Responsive Grids

CSS Grid makes responsive layouts straightforward:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

This creates a responsive grid where items are at least 300px wide and automatically wrap to new rows.

Conclusion

CSS Grid is an essential tool for modern web development. Combined with Flexbox for one-dimensional layouts, you have everything you need to create any layout you can imagine.

Try experimenting with Grid in the Edodo Pen to see how it works in practice!