Layouts in CSS

What is CSS Layouts ?

Web development me layout ek backbone hai. Agar aapko apni website ko properly design aur structure karna hai toh CSS layouts ko samajhna zaroori hai. Layouts define karte hain ki elements webpage par kaise arrange honge – ek dusre ke saath align, space aur position me.

1. Display Property (block, inline, inline-block, none)

1. block: Ye element poori line occupy karta hai. Next element automatically next line se start hota hai. Example: <div>, <p>
2. inline: Ye sirf utni hi width leta hai jitni width ka text ya content hota hai. New line nahi leta .Example: <span>, <a>
3. inline-block: Ye Combination hota hai block aur inline ka. Isme element inline behave karta hai par block ki tarah width/height set kar sakte hai.
4. none: Element ko completely hide kar deta hai (space bhi remove ho jata hai).

2. Positioning (static, relative, absolute, fixed, sticky)

1. static: Default position, normal flow me rahta hai.
2. relative: Apne original position se move hota hai (top, left, right, bottom use karke).
3. absolute: Apne nearest positioned ancestor ke relative place hota hai.
4. fixed: Screen ke relative fix ho jata hai (scroll karne par bhi wahi rehta hai). Example: Navbar.
5. sticky: Scroll karne par ek position tak normal behave karega aur uske baad sticky ho jayega.

Use case:

• Sticky headers
• Fixed navigation bars
• Absolute positioning for tooltips / popups

3. Float and Clear

1. float: Element ko left ya right side align kar deta hai aur baaki content uske around flow hota hai.
2. clear: Float ke effect ko remove karne ke liye use hota hai.

Use case: Pehle websites me images ke side me text align karne ke liye float kaafi use hota tha. Ab Flexbox/Grid ne ise replace kar diya hai.

4. CSS Flexbox

Flexbox ek one-dimensional layout system hai. Ye rows ya columns me elements ko arrange karne ke liye best hai.

• Container properties:
• display: flex;
• flex-direction: row/column
• justify-content → horizontal alignment (start, center, space-between, space-around)
• align-items → vertical alignment (start, center, stretch)
• Item properties:
• flex-grow, flex-shrink, flex-basis

Use case: Navigation menus, cards alignment, responsive layouts.

5. CSS Grid

Grid ek two-dimensional layout system hai jo rows aur columns dono me control deta hai.

• Container properties:
• display: grid;
• grid-template-columns / grid-template-rows
• gap (space between grid items)
• Item properties:
• grid-column / grid-row span

Use case: Complex web page layouts jaise news portal, dashboards.

6. Multi-column Layout

CSS me column-count aur column-gap properties hoti hain jo ek text ko multiple columns me divide kar deti hain.

Example:

p {
  column-count: 3;
  column-gap: 20px;
}

Use case: Newspaper style articles, blog posts, magazines.

7. Z-index & Stacking Context

• z-index: Elements ke overlapping order decide karta hai. Higher z-index wala element upar dikhega.
• Stacking context: Har positioned element apna ek naya stacking context create karta hai.

Use case: Popups, dropdown menus, modal dialogs, overlapping images.

Conclusion

• Display aur Positioning: Basic control dete hain.
• Float: Purana tareeka, ab Flex/Grid prefer karte hain.
• Flexbox: Best for one-direction (row ya column) layouts.
• Grid: Best for two-direction (row + column) layouts.
• Multi-column: Articles/news style ke liye.
• Z-index: Layering aur overlapping ke liye must.