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>9</div>
</div>

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

Фарз қилайлик, сизнинг гридингизда уч устуни бор. Биринчи устун 100px эга бўлсин, қолган икки устун эса тенг ўлчовда бўлсин.

Фарз қилайлик, сизнинг гридингизда тўрт устуни бор. Биринчи ва охирги устунлар 100px эга бўлсин, қолган устунлар эса қолган жойни шундай тақсималсинки, учинчи устун иккинчи устундан 1.5 марта катта бўлсин.