Aliens Wiki
Cinematic Knowledge Experience
0%
Aliens Wiki
Now Playing
Aliens Wiki · HIEN
⌨️ Keyboard Shortcuts
Next slide Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Wiki Article · Cinematic

Grid System

Grid system ek layout framework hai jo ek page ya screen ko organized columns, rows, aur gutters me…

Overview
🌟

Grid System — Quick Facts

📌

Property: Detail

🎯

Full Name: Grid System / Grid Layout System

Category: Web Design / CSS Layout

🔑

Origin: Print typography (1940s–1960s…

Topic 1
📥 📥 🧠 🔬 💡 🎯

Infobox

📚 | Property | Detail | |---|---| | Full Name | Grid System / Grid Layout System | |…
Topic 2
💡 📊 🔬

Itihaas aur Background

💡

Early 2000s — Float-based layouts,…

🔑

2006 — 960 Grid System (960.gs) —…

2011 — Bootstrap (Twitter) —…

🎯

2012 — Foundation (Zurb) — another…

Topic 3
🎯

Core Concepts

💡

Grid ka outer wrapper — defines…

🔑

Fixed-width container (e.g.,…

Horizontal group of columns

🎯

Row columns ko horizontally align…

Topic 4

Grid System Structure

💡

Container — Sabse outer wrapper,…

🔑

Row 1 — 3 equal columns (4+4+4 =…

Row 2 — 2 equal columns (6+6 = 12)

🎯

Row 3 — 1 full-width column (12 =…

Topic 5
📥 📥 🧠 🔬 💡 🎯

12-Column Grid System

💡

12 divisible hai 1, 2, 3, 4, 6, 12…

🔑

10-column grid me 3-equal-columns…

16-column grid bhi use hota hai…

Topic 6

CSS Grid Layout

💡

2D layout — Rows + columns dono…

🔑

No framework needed — Pure CSS,…

Explicit aur implicit grids —…

🎯

Fr unit — Fractional unit for…

Topic 7
📥 ⚙️ 🔬 💡

Flexbox-Based Grids

💡

Row = flex container (display:…

🔑

Columns = flex items with…

Wrapping: flex-wrap: wrap se…

🎯

Bootstrap 4/5 — Grid internally…

Topic 8
🚀

Bootstrap Grid System

💡

.container ya .container-fluid —…

🔑

.row — row of columns (flex…

.col-{breakpoint}-{size} — column…

🎯

col-12 col-md-6 col-lg-4 = mobile…

Topic 9

Responsive Breakpoints

💡

Default styles mobile ke liye…

🔑

Breakpoints se larger screens ke…

Bootstrap, Tailwind sab…

🎯

Fixed breakpoints ke bajaye…

Topic 10

Grid Frameworks Comparison

💡

Quick prototyping / teams:…

🔑

Custom design / performance: CSS…

Utility-first workflow: Tailwind…

🎯

React/Vue apps: Material UI /…

Topic 11

Best Practices

💡

Mobile-first approach follow karo…

🔑

12-column grid use karo unless…

Consistent gutters rakho — 16px,…

🎯

Maximum content width set karo…

Topic 12

Limitations

💡

12-column grid me kuch layouts…

🔑

CSS Grid ke browser support ab…

Framework grids overhead add karte…

🎯

Nested grids complex ho sakte hain…

Comparison

Grid Frameworks Comparison

⚖️

Bootstrap 5: Flexbox (12-col)

⚖️

Tailwind CSS: Utility classes (CSS Grid…

⚖️

Foundation 6: Flexbox (12-col)

Diagram
📥 ⚙️ 🔬 💡

Visual Flow

📊 Diagram visualization — details in narration
Related Topics

See Also

📖

CSS

🔗

CSS Grid Layout

💡

Flexbox

📚

Responsive Web Design

🔑

Bootstrap

🌐

HTML

Quick Quiz
🧠 QUIZ TIME

Quiz — Question 1

Grid System ka sabse sahi definition kya hai?

Quick Quiz
🧠 QUIZ TIME

Quiz — Question 2

Grid System ka 'Full Name' kya hai?

Complete! 🎉
COMPLETE

Grid System Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

Grid System Complete

➡️

CSS

1/20
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
📝 Speaker Notes
⏭️ Up Next
🗂️ All Slides