CSS Grid responsive

Grid auto-fit और auto-fill

auto-fit empty tracks को collapse करता है; auto-fill उन्हें keep करता है। दोनों columns को available space के आधार पर automatically wrap करने देते हैं — breakpoints की जरूरत नहीं।

Auto-responsive card grid

एक grid जो automatically cards को rows में arrange करता है, media queries के बिना किसी भी screen size के अनुसार adapt करता है।

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

अंतर: auto-fit बनाम auto-fill

Alignment के लिए subtle लेकिन महत्वपूर्ण।

/* auto-fit: collapses empty columns, items stretch to fill */
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* auto-fill: keeps empty columns, items don't stretch */
.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

त्वरित जाँच: CSS Grid में minmax(280px, 1fr) क्या करता है?

• Columns को कम से कम 280px सुनिश्चित करता है, space भरने के लिए grow करता है
• Columns को बिल्कुल 280px बनाता है
• Columns को 280px तक limit करता है