Lesson: CSS Grid Layout

📦 What is CSS Grid?

CSS Grid is a two-dimensional layout system. It lets you design web layouts in rows and columns with precision and flexibility.

📐 Key Grid Properties

• display: grid - Enables grid layout
• grid-template-columns - Define column sizes
• grid-template-rows - Define row sizes
• gap - Space between items
• grid-column / grid-row - Span items across rows/columns
• justify-items / align-items - Align content inside grid cells

🧪 Example 1: Basic 3-Column Grid

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.item {
  background: blue;
  color: white;
  padding: 20px;
}

🧪 Example 2: Mixed Column Sizes

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

🧪 Example 3: Spanning Items

.item:first-child {
  grid-column: 1 / 3;
  grid-row: 1;
  background: red;
}

📌 Use Cases

• Page layouts with headers, sidebars, and footers
• Image galleries
• Dashboards and admin panels

🚀 Try It Yourself!