Grid ko responsive kaise kru jisse wo table, mobile,pc ke size ke according arange ho jaye

 Great question, Sansu! Grid ko fully responsive banane ke liye CSS me aise properties use karte hain jo automatically screen size detect karke layout adjust kar lein — jaise:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

---

✅ Responsive Grid Ka Full Setup (Mobile + Tablet + PC Friendly)

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Magic line */
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #1e1e1e;
  color: white;
  padding: 20px;
  border-radius: 15px;
  position: relative;
  z-index: 1;
  border: 3px solid transparent;
  background-clip: padding-box;
  overflow: hidden;
}

.grid-item::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, #ff00cc, #3333ff);
  z-index: -1;
  border-radius: 18px;
}
</style>

<div class="grid-container">
  <div class="grid-item">Content 1</div>
  <div class="grid-item">Content 2</div>
  <div class="grid-item">Content 3</div>
  <div class="grid-item">Content 4</div>
</div>

---

Kaise kaam karta hai ye?

• repeat(auto-fit, minmax(250px, 1fr)) ka matlab:
  "Jitni jagah ho utne columns fit karo, har column minimum 250px aur max jitni jagah ho utni ho sakti hai."
• Isse grid automatically mobile, tablet, PC me adjust ho jata hai.

---

Bonus Tip: Want spacing to reduce on small screens?

@media (max-width: 480px) {
  .grid-container {
    gap: 10px;
    padding: 10px;
  }
  .grid-item {
    padding: 15px;
  }
}

---

Agar chaho toh main is grid me:

• Images, buttons, icons, ya hover effects bhi embed kar sakta hoon Blogger ke liye. Batao kya add karna hai?

Go to Link