पंक्तियों को कई कॉलमों में फैलाएं

सीएसएस ग्रिड में पंक्तियों को उपयुक्त ग्रिड गुणों का उपयोग करके कई कॉलमों को शामिल करने के लिए कॉन्फ़िगर किया जा सकता है। इसे प्राप्त करने का तरीका यहां बताया गया है:

लाइन-आधारित प्लेसमेंट:

सबसे आम दृष्टिकोण लाइन-आधारित प्लेसमेंट के माध्यम से है, जहां आप कॉलम प्रारंभ और समाप्ति लाइनें निर्दिष्ट करते हैं:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

स्पष्ट ग्रिड क्षेत्र:

ग्रिड-क्षेत्र संपत्ति का उपयोग करें, जो स्पष्ट रूप से कब्जे वाले कक्षों को परिभाषित करता है:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

नकारात्मक मान:

ग्रिड-कॉलम या ग्रिड-कॉलम-स्टार्ट में नकारात्मक मान का उपयोग दाएं के लिए किया जा सकता है- बाईं ओर प्लेसमेंट:

grid-column: -2 / -1;  // Spans the last 2 columns

कॉलम लाइन क्लैंपिंग:

यह तकनीक पंक्ति के अंतिम बिंदु को उपलब्ध स्थान तक विस्तारित करने के लिए लाइन क्लैंपिंग का उपयोग करती है:

grid-column: auto;
grid-column-end: 100%;

न्यूनतम के साथ ऑटो-साइज़िंग:

न्यूनतम चौड़ाई के साथ ऑटो-साइज़िंग यह सुनिश्चित करती है कि पंक्ति कम से कम एक निर्दिष्ट संख्या में हो कॉलम:

grid-column: auto;
min-width: 400px;

उदाहरण:

नेविगेशन पंक्ति को सभी स्तंभों तक फैलाने के लिए:

  

    ...
  
  ...

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

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

इन विधियों में से किसी एक को लागू करके, आप सीएसएस ग्रिड में कई कॉलमों में पंक्तियों या स्तंभों का विस्तार कर सकते हैं, जटिल और लचीले लेआउट बना सकते हैं।