พิกเซลและหน่วย fr ใน CSS Grid

สามารถกำหนดความกว้างให้คอลัมน์ โดยใช้พิกเซลและ 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;
}

สมมติว่า Grid ของคุณมีสามคอลัมน์ จงทำให้คอลัมน์แรก กว้าง 100px และคอลัมน์ที่เหลือ อีกสองคอลัมน์มีขนาด เท่ากัน

สมมติว่า Grid ของคุณมีสี่คอลัมน์ จงทำให้คอลัมน์แรกและคอลัมน์สุดท้าย กว้าง 100px และคอลัมน์ที่เหลือแบ่งพื้นที่ว่างที่เหลือ โดยให้คอลัมน์ที่สามกว้างเป็น 1.5 เท่าของคอลัมน์ที่สอง