CSS Full Course Day 11 [Hindi] 💻 | Grid Areas, Gaps & Flow 🚀 | Mohit Decodes

🧩 CSS Tutorial – Day 11: Grid Areas, Gaps & Flow

Welcome to Day 11 of the CSS Full Course [Hindi] by Mohit Decodes! Today, we’ll explore advanced CSS Grid features like defining grid areas, controlling gaps, and understanding grid flow.

🔹 Grid Areas

  1. Define named areas of the grid for easier layout control
  2. Use grid-template-areas on the container and assign grid-area to items
css
CopyEdit
.container {
display: grid;
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px 200px;
grid-template-areas:
"header header header"
"sidebar content ads";
gap: 10px;
}

.header {
grid-area: header;
}

.sidebar {
grid-area: sidebar;
}

.content {
grid-area: content;
}

.ads {
grid-area: ads;
}

🔹 Grid Gaps

  1. Use gap or grid-gap to set spacing between rows and columns
  2. Makes grid layouts cleaner and easier to read

🔹 Grid Auto Flow

  1. Controls how auto-placed items fill the grid (row or column)
  2. Property: grid-auto-flow
  3. Example: grid-auto-flow: column;

💡 Tips:

  1. Named grid areas simplify complex layouts
  2. Use gaps instead of margins for consistent spacing
  3. Adjust grid-auto-flow to change item placement dynamically