CSS Grid Basics – Layouts Made Easy

When it comes to creating two-dimensional layouts, CSS Grid is one of the most powerful tools available. Unlike Flexbox (which is mainly one-dimensional), Grid lets you arrange items in rows and columns simultaneously, making it ideal for complex layouts like web pages, dashboards, or galleries.

What is CSS Grid?

CSS Grid is a layout system that divides a container into rows and columns. Each child element (called a grid item) can be placed anywhere inside the grid.

To enable Grid, simply set the container’s display property to grid:

.container {
  display: grid;
}

.container {
  display: grid;
}

Defining Rows and Columns

You can define how many rows and columns your grid should have using grid-template-rows and grid-template-columns.

Example:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

👉 This creates a grid with 3 columns (200px each) and 2 rows (100px each).

Using the fr Unit

The fr (fractional unit) distributes available space automatically.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

👉 This makes 3 columns where the middle one is twice as wide as the others.

Gap Between Grid Items

Instead of margins, use gap to add spacing between grid cells.

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

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

Placing Items in the Grid

You can place items in specific rows and columns using grid-column and grid-row.

.item1 {
  grid-column: 1 / 3; /* spans across column 1 and 2 */
  grid-row: 1 / 2;   /* occupies row 1 */
}

.item1 {
  grid-column: 1 / 3; /* spans across column 1 and 2 */
  grid-row: 1 / 2;   /* occupies row 1 */
}

Repeat Function

The repeat() function reduces code repetition.

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

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

👉 This creates 3 equal columns without writing 1fr 1fr 1fr.

Auto-fit and Auto-fill

Useful for responsive designs where columns should adjust to available space.

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

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

👉 This creates flexible columns that shrink no smaller than 200px but expand as needed.

Common Mistakes Beginners Make

1. Forgetting to use display: grid; on the parent container.
2. Mixing up grid-column vs grid-row.
3. Not using fr units and ending up with rigid layouts.
4. Ignoring auto-fit or auto-fill → makes layouts non-responsive.

Quick Reference Summary

Practice Challenge

1. Create a 3×2 grid with equal columns and rows.
2. Add gap: 15px; between items.
3. Make the first item span across the entire first row.
4. Make the grid responsive using auto-fit and minmax(150px, 1fr).

Conclusion

CSS Grid gives you unmatched control for creating two-dimensional layouts. While Flexbox is great for one-dimensional alignment, Grid is the best choice for full page layouts, dashboards, and galleries.