CSS Grid

📘 CSS Grid Kya Hai?

Hindi: CSS Grid ek powerful layout system hai jiska use website ke elements ko rows aur columns mein arrange karne ke liye kiya jata hai.

English: CSS Grid is a layout system used to create rows and columns for website designs.

💡 CSS Grid Kyu Use Karte Hain?

CSS Grid ka use mainly:

• Website layouts banane ke liye
• Multiple cards arrange karne ke liye
• Columns banane ke liye
• Gallery design karne ke liye
• Professional responsive websites banane ke liye

1️⃣ display: grid

Grid layout start karne ke liye parent element par display: grid; lagate hain.

.container{
    display:grid;
}

2️⃣ grid-template-columns

Is property se hum decide karte hain ki grid mein kitne columns honge.

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

Is example mein 3 equal columns banenge.

3️⃣ Do Columns Banana

Agar humein 2 columns chahiye to:

.container{
    display:grid;
    grid-template-columns:1fr 1fr;
}

1fr ka matlab available space ka ek equal part.

4️⃣ gap

Grid items ke beech distance dene ke liye gap property use karte hain.

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

5️⃣ Grid Rows

Rows ko control karne ke liye grid-template-rows use kar sakte hain.

.container{
    display:grid;
    grid-template-rows:100px 100px;
}

💻 Grid Card Example

Ab Grid ka use karke 3 cards ka simple layout banate hain.

<div class="container">

    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>

</div>

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

.card{
    padding:30px;
    background:#00d9ff;
    text-align:center;
    border-radius:10px;
}

📱 Responsive Grid

Mobile screen par columns ki number kam karne ke liye media query use kar sakte hain.

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

@media(max-width:600px){

    .container{
        grid-template-columns:1fr;
    }

}

Desktop par 3 columns aur mobile par 1 column ho jayega.

🚀 Auto Responsive Grid

CSS Grid ka ek useful method hai auto-fit aur minmax().

.container{
    display:grid;
    grid-template-columns:
    repeat(auto-fit, minmax(200px, 1fr));

    gap:20px;
}

Isse available screen size ke according columns automatically adjust ho sakte hain.

🌐 Professional Website Mein Grid

Professional websites mein CSS Grid ka use services, projects, products, portfolios aur image galleries ke liye bahut kiya jata hai.

.project-grid{
    display:grid;
    grid-template-columns:
    repeat(3, 1fr);

    gap:20px;
}

⚠️ Important Note