Skill Topic · Cinematic

🔲 CSS Grid - 2D Layout System!

CSS Grid se 2-dimensional layouts banao — rows AUR columns dono ek saath! Most powerful layout…

Overview

🔲 CSS Grid - 2D Layout System! — Quick Facts

📌

⬅️ Previous: 📚 Index

🎯

:---: :---:

⚡

[110: Flex Responsive](./110_CSS_Flex_Responsive.md): 📋 CSS Index

Topic 1

📌 Grid Concept

📚 css / === Grid Container activate karo === / .container { display: grid; } ` Flexbox =…

Topic 2

📌 Basic Grid

💡 `css .grid { display: grid; grid-template-columns: 200px 200px 200px; / 3 columns, each…

Topic 3

📌 fr Unit (Fraction!)

🎯 `css / === fr = fraction of available space === / .grid-fr { display: grid;…

Topic 4

📌 repeat() Function

⭐ `css / === repeat() se short likho! === / .grid-repeat { grid-template-columns: repeat(3,…

Topic 5

📌 Rows

🔑 `css .grid-rows { display: grid; grid-template-columns: repeat(3, 1fr);…

Topic 6

📌 gap (Grid me!)

✨ `css .grid-gap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; / Row…

Topic 7

📌 Grid Lines & Placing Items

🌟 `css / === Item ko specific position pe rakho! === / .item-1 { grid-column: 1 / 3; /…

Topic 8

📌 span Keyword

🚀 `css .span-2-cols { grid-column: span 2; / 2 columns span! / } .span-3-rows { grid-row:…

Topic 9

📌 Grid Template Areas (Named!)

📚 `css .layout { display: grid; grid-template-areas: "header header header" "sidebar main…

Topic 10

📌 auto-fill vs auto-fit

💡 `css / === auto-fill: empty columns create karo === / .grid-fill { grid-template-columns:…

Topic 11

📌 Grid vs Flexbox

🎯 ` ┌─────────────────┬─────────────────┬──────────────────┐ │ │ Grid │ Flexbox │…

Topic 12

🔑 KEY POINTS

⭐ ` ┌─────────────────────────────────────────────────────────┐ │ │ │ 🔑 KEY POINTS — CSS…

Topic 13

💪 Exercises

🔑 Exercise 1: 3x3 equal grid banao — gap 10px. Exercise 2: grid-template-areas se page…

Topic 14

🗺️ Navigation

✨ | ⬅️ Previous | 📚 Index | ➡️ Next | |:---|:---:|---:| | 110: Flex Responsive | 📋 CSS…

Quick Quiz

Quiz — Question 1

🔲 CSS Grid - 2D Layout System! ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

🔲 CSS Grid - 2D Layout System! ka ':---' kya hai?

Complete! 🎉

🔲 CSS Grid - 2D Layout System! Complete!

Aliens School · HIEN · Cinematic Knowledge

✅