CSS ग्रिड में आंशिक इकाइयाँ fr

fr इकाइयों में निर्दिष्ट मान आंशिक रूप ले सकते हैं। आइए पिछले उदाहरण को बदलते हैं, दूसरे और तीसरे कॉलम की चौड़ाई आंशिक संख्याओं में निर्दिष्ट करके:

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 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: