सीएसएस ग्रिड में fr यूनिट
ग्रिड में पंक्तियों और कॉलम के आकार केवल
px में ही नहीं,
बल्कि लचीलापन की इकाइयों fr (अंश)
में भी निर्धारित किए जा सकते हैं।
इन इकाइयों का उपयोग करने का मतलब है कि
तत्वों को रखने के लिए सारी जगह को
समान हिस्सों या अंशों में बांट दिया जाएगा।
प्रत्येक तत्व इस बंटवारे का एक निश्चित हिस्सा
ले सकेगा। आइए देखें कि यह कैसे किया जाता है।
आइए grid-template-columns गुण का उपयोग करके
ऐसा करें कि ग्रिड का पहला और दूसरा कॉलम
कंटेनर का एक हिस्सा ले, और तीसरा कॉलम - तीन हिस्से:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
मान लें कि आपके ग्रिड में दो कॉलम हैं। ऐसा करें कि उनकी चौड़ाई समान हो।
मान लें कि आपके ग्रिड में तीन कॉलम हैं। ऐसा करें कि उनकी चौड़ाई समान हो।
मान लें कि आपके ग्रिड में तीन कॉलम हैं। ऐसा करें कि तीसरा कॉलम पहले और दूसरे कॉलम से दोगुना बड़ा हो।
