Chapter 14CSS Tutorial~1 min read
CSS Grid
Two-Dimensional Layout — Rows & Columns
CSS Grid हे two-dimensional layout system आहे — rows आणि columns दोन्ही एकत्र handle करते. Flexbox one-dimensional आहे (row किंवा column). Complex page layouts साठी Grid perfect आहे.
Grid सुरू करणे
Basic Grid Setup
css
.grid-container {
display: grid;
/* 3 columns define करणे */
grid-template-columns: 1fr 2fr 1fr;
/* 1fr = 1 fractional unit — middle column 2 पट रुंद */
/* 2 rows */
grid-template-rows: 100px auto;
/* Items मधील space */
gap: 20px; /* सगळीकडे */
row-gap: 10px; /* फक्त rows मध्ये */
column-gap: 30px; /* फक्त columns मध्ये */
}grid-template-areas — Visual Layout
Webpage Layout — Grid Areas
css
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: 60px 1fr 40px;
min-height: 100vh;
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Grid Item — Spanning Columns/Rows
Grid Item Properties
css
.featured-card {
/* Column 1 ते 3 पर्यंत span करणे */
grid-column: 1 / 3; /* lines 1 ते 3 */
grid-column: span 2; /* 2 columns span */
/* Row span */
grid-row: 1 / 3;
grid-row: span 2;
}Grid vs Flexbox — कधी काय वापरायचे?
- ▸Flexbox: Single row/column layouts — Navbar, button groups, card row
- ▸Grid: Complex 2D layouts — Full page structure, image galleries, dashboards
- ▸Real projects मध्ये दोन्ही एकत्र वापरतात — outer layout Grid, inner components Flexbox
Marathi Analogy
🏙️ Analogy: Grid म्हणजे city planning सारखे — roads (columns/rows) आधी define करतो, मग buildings (items) त्या grid मध्ये बसवतो. Flexbox म्हणजे एका road वर houses arrange करणे.
✅ Key Points — लक्षात ठेवा
- ▸display: grid — 2D layout (rows + columns)
- ▸grid-template-columns: 1fr 2fr — column sizes
- ▸fr = fractional unit — available space चा भाग
- ▸grid-template-areas — visual, named layout zones
- ▸Grid = page structure | Flexbox = component layout
0/16 chapters पूर्ण