Grid Container Basics

🏗️ CSS Grid: Building Your Dream City

Imagine you’re a city planner building a brand new city from scratch. You have empty land, and you need to decide where to put houses, parks, shops, and roads. CSS Grid is exactly like that — it helps you organize things on a webpage into neat rows and columns, just like blocks in a city!

🎬 The Story Begins: Your Empty Land

You just got a big piece of empty land. Before you can build anything, you need to turn it into a grid — a pattern of rows and columns, like a checkerboard or a chocolate bar with squares.

In CSS, we do this by telling a container: “Hey, you’re going to be a grid now!”

📦 1. CSS Grid Container Setup

What Is It?

A grid container is like the boundary of your city. Everything inside it will follow your grid rules.

How Do You Create One?

You simply tell any box: “You are a grid!”

.my-city {
  display: grid;
}

That’s it! Now .my-city is your grid container. All the items inside (like houses, parks, shops) become grid items that you can arrange.

Simple Example

<div class="my-city">
  <div>House 1</div>
  <div>House 2</div>
  <div>House 3</div>
</div>

.my-city {
  display: grid;
}

Now you have a grid! But wait… all the houses are just stacked on top of each other. That’s because we haven’t told the grid how many columns we want. Let’s fix that!

📐 2. grid-template-columns

What Is It?

This property tells the grid: “How many columns should I have, and how wide should each one be?”

Think of it like deciding how many streets run from left to right in your city.

How Does It Work?

.my-city {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

This creates 3 columns, each 100 pixels wide.

Visual Diagram

graph TD
    A["Grid Container"] --> B["Column 1<br>100px"]
    A --> C["Column 2<br>100px"]
    A --> D["Column 3<br>100px"]

Real Example

.my-city {
  display: grid;
  grid-template-columns: 150px 200px 150px;
}

Now you have:

• First column: 150px wide
• Second column: 200px wide
• Third column: 150px wide

Your items will automatically fill into these columns, one by one!

📏 3. grid-template-rows

What Is It?

This tells the grid: “How many rows should I have, and how tall should each one be?”

Think of rows like streets running from top to bottom in your city.

How Does It Work?

.my-city {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 80px 120px;
}

This creates:

• 2 columns (100px each)
• 2 rows (first is 80px tall, second is 120px tall)

Visual Diagram

graph TD
    subgraph Row 1 - 80px tall
        A["Item 1"] --> B["Item 2"]
    end
    subgraph Row 2 - 120px tall
        C["Item 3"] --> D["Item 4"]
    end

Combining Columns and Rows

.my-city {
  display: grid;
  grid-template-columns: 100px 150px 100px;
  grid-template-rows: 50px 100px;
}

You now have a 3×2 grid (3 columns, 2 rows) — like a 6-piece chocolate bar!

🔁 4. The repeat() Function

What Is It?

Typing 100px 100px 100px 100px 100px for 5 equal columns is boring and long. The repeat() function is your shortcut!

How Does It Work?

Instead of writing:

grid-template-columns: 100px 100px 100px 100px 100px;

You write:

grid-template-columns: repeat(5, 100px);

This says: “Give me 5 columns, each 100px wide.”

The Magic Formula

repeat(how-many-times, what-size)

More Examples

/* 4 columns, each 80px */
grid-template-columns: repeat(4, 80px);

/* 3 rows, each 60px tall */
grid-template-rows: repeat(3, 60px);

/* Mix: 1 fixed column + 3 repeated columns */
grid-template-columns: 200px repeat(3, 100px);

Why It’s Amazing

• ✅ Less typing
• ✅ Easier to read
• ✅ Easier to change (just update the number!)

📊 5. The minmax() Function

What Is It?

Sometimes you don’t want a column to be a fixed size. You want it to be flexible — but not TOO small or TOO big.

minmax() lets you set a minimum and maximum size.

The Magic Formula

minmax(smallest-it-can-be, biggest-it-can-be)

How Does It Work?

.my-city {
  display: grid;
  grid-template-columns: minmax(100px, 300px);
}

This column will:

• Never shrink smaller than 100px
• Never grow bigger than 300px
• Adjust in between based on available space

Real Example

.my-city {
  display: grid;
  grid-template-columns:
    minmax(150px, 250px)
    minmax(100px, 1fr);
}

• First column: between 150px and 250px
• Second column: at least 100px, but can grow to fill remaining space (that’s what 1fr means — we’ll learn it next!)

Why It’s Powerful

• 📱 Perfect for mobile screens
• 🖥️ Adapts to bigger screens
• 🎯 You control the limits

⚖️ 6. The fr Unit

What Is It?

The fr stands for “fraction”. It’s a magical unit that divides available space fairly.

Think of it like cutting a pizza: if you have 3 people, each gets 1 fraction of the pizza.

How Does It Work?

.my-city {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

This creates 3 columns that share the space equally. Each column gets 1/3 of the available width.

Visual Diagram

graph LR
    A["1fr"] --- B["1fr"] --- C["1fr"]
    style A fill:#FFE4E1
    style B fill:#E1FFE4
    style C fill:#E1E4FF

Different Fractions

grid-template-columns: 1fr 2fr 1fr;

• First column: 1 part
• Second column: 2 parts (twice as wide!)
• Third column: 1 part

Total = 4 parts. The middle column gets half the space!

Mixing fr with Fixed Sizes

grid-template-columns: 200px 1fr 1fr;

• First column: exactly 200px
• The remaining space is split equally between columns 2 and 3

Why fr is Your Best Friend

• ✅ No math needed
• ✅ Automatically adapts to screen size
• ✅ Always uses all available space
• ✅ No horizontal scroll problems

🎨 Putting It All Together

Let’s build a complete example using everything we learned:

.my-city {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(100px, 1fr));
  grid-template-rows:
    100px
    repeat(2, minmax(80px, auto));
  gap: 10px;
}

What This Does:

1. 3 columns using repeat()
2. Each column is flexible using minmax() — at least 100px but can grow
3. Each column shares space fairly using 1fr
4. 3 rows: first is 100px, next two are at least 80px
5. gap: 10px adds nice spacing between items

🚀 Quick Summary

🎉 You Did It!

You just learned how to be a CSS City Planner!

You now know how to:

• ✅ Create a grid container
• ✅ Set up columns and rows
• ✅ Use repeat() to save time
• ✅ Use minmax() for flexible layouts
• ✅ Use fr to share space fairly

Your webpages can now have beautiful, organized layouts — just like a perfectly planned city! 🏙️