หน่วย fr ใน CSS Grid

ขนาดของแถวและคอลัมน์ใน Grid สามารถ กำหนดได้ไม่เพียงแต่ในหน่วย px เท่านั้น แต่ยังกำหนดในหน่วยความยืดหยุ่น fr (เศษส่วน) ได้อีกด้วย การใช้หน่วยเหล่านี้หมายความว่า พื้นที่ทั้งหมดสำหรับการจัดวางองค์ประกอบ จะถูกแบ่งออกเป็นส่วนเท่าๆ กันหรือเป็นเศษส่วน แต่ละองค์ประกอบสามารถ รับส่วนที่กำหนดไว้ของ การแบ่งส่วนนี้ได้ มาดูกันว่า ทำได้อย่างไร

มาใช้คุณสมบัติ grid-template-columns เพื่อทำให้คอลัมน์ที่หนึ่งและที่สอง ของ Grid รับพื้นที่หนึ่งส่วนของคอนเทนเนอร์ และคอลัมน์ที่สามรับพื้นที่สามส่วน:

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

ให้ Grid ของคุณมีสองคอลัมน์ ทำให้คอลัมน์ทั้งสองมีความกว้าง เท่ากัน

ให้ Grid ของคุณมีสามคอลัมน์ ทำให้คอลัมน์ทั้งสามมีความกว้าง เท่ากัน

ให้ Grid ของคุณมีสามคอลัมน์ ทำให้คอลัมน์ที่สาม กว้างเป็นสองเท่าของคอลัมน์แรก และคอลัมน์ที่สอง