सीएसएस ग्रिड कॉलम को पुनर्व्यवस्थित करें

परिचय

सीएसएस ग्रिड वेब सामग्री के लिए एक लचीली लेआउट प्रणाली प्रदान करता है, जिसमें ऑर्डर और स्थिति को नियंत्रित करने की क्षमता भी शामिल है कॉलम. यह प्रश्न सीएसएस ग्रिड के भीतर कॉलम क्रम को बदलने पर चर्चा करता है। यह आपको ग्रिड के भीतर विशिष्ट क्षेत्रों को परिभाषित करने और उन क्षेत्रों में कॉलम निर्दिष्ट करने की अनुमति देता है। उदाहरण के लिए:

.my-grid { ग्रिड-टेम्पलेट-क्षेत्र: "col3 col1" "col3 col2"; }

यह col3 तत्व को पंक्ति की शुरुआत में ले जाएगा, उसके बाद col1 तत्व।

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

आप लाइन-आधारित प्लेसमेंट का भी उपयोग कर सकते हैं स्तंभ क्रम को नियंत्रित करने के लिए. इसमें ग्रिड लाइनों के साथ ग्रिड आइटम को एक के बाद एक रखना शामिल है, जिसमें "ग्रिड-कॉलम-स्टार्ट" और "ग्रिड-कॉलम-एंड" गुण प्रारंभ और अंत स्थान निर्धारित करते हैं।

उदाहरण के लिए, स्थिति को निर्धारित करने के लिए col1 तत्व के बाद col3 तत्व:

.col3 { ग्रिड-कॉलम-प्रारंभ: 2; }

ऑर्डर प्रॉपर्टी

.col3 {
  grid-column-start: 2;
}

col3 तत्व को पहले स्थान पर ले जाने के लिए:

। col3 { क्रम:-1; }

Dense Function

.col3 {
  order: -1;
}

col3 तत्व को दूसरी पंक्ति की शुरुआत में ले जाने के लिए:

.माय-ग्रिड { ग्रिड-ऑटो-फ्लो: सघन 1fr; } .col3 { ग्रिड-कॉलम: 3; ग्रिड-पंक्ति: 2; }

इन तकनीकों को लागू करके, आप विभिन्न स्क्रीन आकारों या डिवाइस ओरिएंटेशन पर वांछित लेआउट आवश्यकताओं को पूरा करने के लिए ग्रिड कॉलम को गतिशील रूप से पुनर्व्यवस्थित कर सकते हैं।