✅ Module 7: CSS Grid (🗂️📐)

🗂️ Module 7: CSS Grid

CSS Grid is a powerful two-dimensional layout system. It allows you to design web pages with rows and columns, creating complex layouts with minimal code. Grid is perfect for dashboards, galleries, and overall page structures. 🧮

🔧 Getting Started

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

The 1fr unit means “one fraction of the available space.” In the example above, you create 3 equal columns with 20px gaps between them.

🔹 Grid Properties

• grid-template-rows, grid-template-columns
• grid-row, grid-column: Control element placement
• grid-area: Name grid areas for easier layout
• gap: Shorthand for row and column gaps

🎯 Grid Item Placement

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

📐 Named Grid Areas

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

✅ Summary

• Grid is ideal for 2D layouts with both rows and columns.
• Use fr units, named areas, and grid lines for precise control.
• Flexbox is best for one-axis layouts; Grid is for two. 🔄