CSS গ্রিডে শতাংশ এবং fr ইউনিট

fr এর পাশাপাশি, % এ মানও ব্যবহার করা যেতে পারে, যা কলামটি কন্টেইনারের কত অংশ দখল করবে তাও নির্ধারণ করে। এক্ষেত্রে, প্রথমে % এ কলামের আকার গণনা করা হবে, এবং অবশিষ্ট খালি জায়গাকে ভগ্নাংশে ভাগ করা হবে:

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

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

ধরুন আপনার গ্রিডে তিনটি কলাম আছে। এটি এমনভাবে তৈরি করুন যাতে প্রথম কলামটি 20% দখল করে, এবং বাকি দুটি কলাম একই আকারের হয়।

ধরুন আপনার গ্রিডে পাঁচটি কলাম আছে। এটি এমনভাবে তৈরি করুন যাতে প্রথম কলামটি 100px দখল করে, দ্বিতীয় কলামটি 20% দখল করে, এবং বাকি কলামগুলি অবশিষ্ট স্থান ভাগ করে নেয় যাতে প্রতিটি কলাম আগের কলামের দুই গুণ বড় হয়।