# Mastering CSS Grid – Building Two-Dimensional Layouts

Yesterday, I learned how Flexbox makes arranging elements in a single row or column simple and responsive.

Today, I explored **CSS Grid**, another powerful layout system that allows us to design web pages using both **rows and columns** simultaneously.

If Flexbox is great for arranging items in one direction, CSS Grid is perfect for creating complete page layouts.

Let's dive in.

* * *

# What is CSS Grid?

**CSS Grid** is a two-dimensional layout system that allows developers to organize content into rows and columns.

Unlike Flexbox, which works on one axis at a time, Grid gives us complete control over both horizontal and vertical placement.

To use Grid, we first create a **Grid Container**.

```css
.container{
    display:grid;
}
```

Once `display: grid` is applied, all direct children become **Grid Items**.

* * *

# Grid Container vs Grid Items

```html
<div class="container">

    <div>Item 1</div>

    <div>Item 2</div>

    <div>Item 3</div>

</div>
```

Here,

*   `.container` → Grid Container
    
*   Child elements → Grid Items
    

* * *

# Grid Template Columns

Defines how many columns the grid should have.

```css
.container{
    display:grid;

    grid-template-columns:200px 200px 200px;
}
```

This creates three columns.

A more flexible approach:

```css
grid-template-columns:1fr 1fr 1fr;
```

`fr` stands for **Fraction Unit**, which divides the available space equally.

* * *

# Grid Template Rows

Defines the height of each row.

```css
grid-template-rows:150px 150px;
```

* * *

# Gap

Creates spacing between rows and columns.

```css
.container{

    gap:20px;

}
```

No need to use margins between items.

* * *

# Repeat()

Instead of writing:

```css
grid-template-columns:1fr 1fr 1fr 1fr;
```

We can write:

```css
grid-template-columns:repeat(4,1fr);
```

Cleaner and easier to maintain.

* * *

# Grid Column

Allows an item to span multiple columns.

```css
.item{

    grid-column:1/3;

}
```

The item stretches from column 1 to column 3.

* * *

# Grid Row

Allows an item to span multiple rows.

```css
.item{

    grid-row:1/3;

}
```

* * *

# Place Items

Aligns items both horizontally and vertically.

```css
.container{

place-items:center;

}
```

Equivalent to:

```css
justify-items:center;

align-items:center;
```

* * *

# Grid Areas

One of Grid's most powerful features.

Example:

```css
grid-template-areas:

"header header"

"sidebar content"

"footer footer";
```

Each element is assigned an area name.

```css
.header{

grid-area:header;

}
```

This makes complex layouts much easier to understand.

* * *

# Auto-Fit & Minmax()

Used for responsive grids.

```css
grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));
```

This automatically adjusts the number of columns based on screen size.

One of the most commonly used Grid patterns in modern web development.

* * *

# Flexbox vs Grid

| Flexbox | CSS Grid |
| --- | --- |
| One-dimensional | Two-dimensional |
| Best for components | Best for full layouts |
| Navigation Bars | Dashboards |
| Cards | Gallery Layouts |
| Buttons | Complete Web Pages |

The two are not competitors—they complement each other.

Professional websites often use **Grid for the page structure** and **Flexbox inside individual components**.

* * *

# Best Practices

✔ Use Grid for page layouts.

✔ Use Flexbox inside Grid items.

✔ Prefer `repeat()` for cleaner code.

✔ Use `gap` instead of margins.

✔ Learn `auto-fit` and `minmax()` for responsive layouts.

* * *

# My Biggest Takeaway

Before today, I thought Flexbox could solve every layout problem.

Now I understand why CSS Grid exists.

Grid makes it much easier to design complete page layouts with rows and columns while keeping the code clean and organized.

The `repeat()`, `fr`, and `auto-fit` functions were especially interesting because they make layouts more flexible and responsive.

Learning CSS Grid feels like unlocking the final piece of modern CSS layout design.