🧱 CSS COURSE – MODULE 9: GRID

📁 File: grid.md

🧱 CSS Grid

📌 Introduction

CSS Grid is a 2D layout system used to design:

• rows
• columns
• full page layouts

👉 If Flexbox is for alignment, Grid is for entire page structure.

🧠 1. Enable Grid

.container {
  display: grid;
}

✔ This activates grid system

📐 2. Define Columns

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

Meaning:

• 3 equal columns
• fr = fraction of available space

📏 3. Define Rows

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

✔ First row = 100px ✔ Second row = 200px

⚡ 4. Gap (Spacing)

.container {
  gap: 10px;
}

✔ Space between grid items

🧩 5. Repeat Function (VERY USEFUL)

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

✔ Cleaner way to create columns

📦 6. Auto Fit / Responsive Grid

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

✔ Makes responsive layouts automatically

📍 7. Grid Item Positioning

.item {
  grid-column: 1 / 3;
}

✔ Spans item across columns

📐 8. Grid Areas (ADVANCED)

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

✔ Used for full page layouts

🧩 Real Example

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

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

.box {
  background: blue;
  color: white;
  padding: 20px;
}

🏗️ Full Layout Example (REAL WEBSITE STYLE)

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

🧠 Grid vs Flexbox

⚠️ Common Mistakes

• Using Grid for simple alignment ❌
• Forgetting display: grid ❌
• Not understanding fr ❌
• Mixing Grid + Flex incorrectly ❌

🎯 Pro Tip

👉 Use:

• Flexbox → navbar, buttons, alignment
• Grid → page layout, dashboards

🧪 Mini Exercise

Create:

1. A 3-column grid layout
2. A responsive card grid
3. A layout with header/sidebar/main/footer
4. A grid using auto-fit