सीएसएस ग्रिड में fr यूनिट

ग्रिड में पंक्तियों और कॉलम के आकार केवल px में ही नहीं, बल्कि लचीलापन की इकाइयों fr (अंश) में भी निर्धारित किए जा सकते हैं। इन इकाइयों का उपयोग करने का मतलब है कि तत्वों को रखने के लिए सारी जगह को समान हिस्सों या अंशों में बांट दिया जाएगा। प्रत्येक तत्व इस बंटवारे का एक निश्चित हिस्सा ले सकेगा। आइए देखें कि यह कैसे किया जाता है।

आइए grid-template-columns गुण का उपयोग करके ऐसा करें कि ग्रिड का पहला और दूसरा कॉलम कंटेनर का एक हिस्सा ले, और तीसरा कॉलम - तीन हिस्से:

html<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>

css#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;
}

Результат: