fr इकाई

लचीली इकाई fr उस कुल स्थान के हिस्से या अंश को दर्शाती है जिसमें तत्व स्थित है। fr का उपयोग करने का लाभ है विभिन्न कंटेनरों या स्क्रीन रिज़ॉल्यूशन के लिए इसकी अनुकूलन क्षमता, क्योंकि 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>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
	box-sizing: border-box;
	border: 1px solid #696989;
}

उदाहरण

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

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

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

यह भी देखें

इकाई px,
जो पिक्सेल में आकार निर्धारित करती है
इकाई em,
जो em में आकार निर्धारित करती है
इकाई rem,
जो rem में आकार निर्धारित करती है
इकाई %,
जो प्रतिशत में आकार निर्धारित करती है
इकाई vw,
जो vw में आकार निर्धारित करती है
इकाई vh,
जो vh में आकार निर्धारित करती है
इकाई vmax,
जो vmax में आकार निर्धारित करती है
इकाई vmin,
जो vmin में आकार निर्धारित करती है