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

Quiz — Question 1

Grid System ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

Grid System ka 'Full Name' kya hai?

Complete! 🎉

Grid System Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

✅

Grid System Complete

➡️

Grid System

Grid System — Quick Facts

Property: Detail

Full Name: Grid System / Grid Layout System

Category: Web Design / CSS Layout

Origin: Print typography (1940s–1960s…

Infobox

Itihaas aur Background

Early 2000s — Float-based layouts,…

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

2011 — Bootstrap (Twitter) —…

2012 — Foundation (Zurb) — another…

Core Concepts

Grid ka outer wrapper — defines…

Fixed-width container (e.g.,…

Horizontal group of columns

Row columns ko horizontally align…

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 =…

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…

CSS Grid Layout

2D layout — Rows + columns dono…

No framework needed — Pure CSS,…

Explicit aur implicit grids —…

Fr unit — Fractional unit for…

Flexbox-Based Grids

Row = flex container (display:…

Columns = flex items with…

Wrapping: flex-wrap: wrap se…

Bootstrap 4/5 — Grid internally…

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…

Responsive Breakpoints

Default styles mobile ke liye…

Breakpoints se larger screens ke…

Bootstrap, Tailwind sab…

Fixed breakpoints ke bajaye…

Grid Frameworks Comparison

Quick prototyping / teams:…

Custom design / performance: CSS…

Utility-first workflow: Tailwind…

React/Vue apps: Material UI /…

Best Practices

Mobile-first approach follow karo…

12-column grid use karo unless…

Consistent gutters rakho — 16px,…

Maximum content width set karo…

Limitations

12-column grid me kuch layouts…

CSS Grid ke browser support ab…

Framework grids overhead add karte…

Nested grids complex ho sakte hain…

Grid Frameworks Comparison

Bootstrap 5: Flexbox (12-col)

Tailwind CSS: Utility classes (CSS Grid…

Foundation 6: Flexbox (12-col)

Visual Flow

See Also

CSS

CSS Grid Layout

Flexbox

Responsive Web Design

Bootstrap

HTML

Quiz — Question 1

Quiz — Question 2

Grid System Complete!

Grid System Complete

CSS