CSS Layout Techniques

CSS se web page ke elements ko position karne aur layout banane ke kai tareeke hain. Har technique ka apna use case aur advantages hote hain.

1. Flow Layout (Default)

Browser me jab koi CSS apply nahi hota, to elements naturally flow layout me arrange hote hain - block elements vertical stack hote hain aur inline elements horizontally flow karte hain.

2. Float Layout

Float property se elements ko left ya right me push karke text wrap ya multi-column effect create kiya jata tha. Ye purani technique hai par ab kam use hoti hai.

.box {
  float: left;
  width: 45%;
  margin: 2.5%;
}

3. Positioning

Position property se aap element ko static, relative, absolute, fixed, ya sticky position de sakte hain, jisse exact placement control hota hai.

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
}

4. Flexbox Layout

Flexible box layout responsive design aur complex alignment ke liye bahut powerful hai. Ye container ke andar elements ko horizontal ya vertical line me arrange karta hai.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

5. CSS Grid Layout

Grid layout se 2D grid banakar rows aur columns me content ko organize kar sakte hain. Ye modern layouts ke liye bahut useful hai.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

6. Responsive Design

Media queries se alag screen sizes ke liye alag layouts design kar sakte hain jaise mobile, tablet, ya desktop ke liye.

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Summary

Aapko apne project ke hisab se sahi layout technique choose karni chahiye. Aajkal Flexbox aur Grid sabse effective hain responsive aur complex layouts ke liye.