CSS ग्रिड कॉलम - ग्रिड लेआउट में ऊर्ध्वाधर रेखाएं

CSS ग्रिड लेआउट में ग्रिड कॉलम (Grid Columns) ऊर्ध्वाधर (वर्टिकल) ट्रैक्स होते हैं जो ग्रिड कंटेनर को कॉलम में विभाजित करते हैं। grid-template-columns प्रॉपर्टी से परिभाषित किए जाते हैं।

ग्रिड कॉलम अवधारणा

ग्रिड कॉलम ग्रिड लाइन्स (ऊर्ध्वाधर रेखाएं) के बीच का स्थान है। कॉलम की संख्या और आकार grid-template-columns से निर्धारित होता है।

grid-template-columns उदाहरण

/* फिक्स्ड चौड़ाई */
grid-template-columns: 200px 200px 200px;

/* फ्रैक्शनल यूनिट (fr) - अनुपातिक */
grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 अनुपात */

/* मिश्रित */
grid-template-columns: 200px 1fr 100px;

/* रिपीट फंक्शन */
grid-template-columns: repeat(3, 1fr);  /* 3 बराबर कॉलम */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* रिस्पॉन्सिव! */

/* नामित ग्रिड लाइन्स */
grid-template-columns: [start] 1fr [middle] 1fr [end];

ग्रिड कॉलम से संबंधित प्रॉपर्टीज़

• grid-template-columns - कॉलम परिभाषित करें
• grid-column - आइटम किस कॉलम में शुरू/खत्म हो
• grid-column-start / grid-column-end
• column-gap / grid-column-gap - कॉलम गैप

रिस्पॉन्सिव कॉलम (मॉडर्न बेस्ट प्रैक्टिस)

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* स्वचालित: जितने 280px कॉलम फिट हों, उतने बनते हैं */