จำนวนและความกว้างของคอลัมน์ใน CSS Grid

การเริ่มต้นทำงานกับกริด เราจะเริ่มจากการกำหนด จำนวนและความกว้างของคอลัมน์ ซึ่ง จะเป็นที่วางสำหรับองค์ประกอบลูก สำหรับจุดประสงค์นี้เราใช้ คุณสมบัติ grid-template-columns ซึ่งระบุ ในองค์ประกอบพ่อแม่และกำหนด จำนวนและความกว้างของคอลัมน์ที่ องค์ประกอบลูกจะครอบครองในกริด ในค่าของคุณสมบัติเราระบุความกว้างของคอลัมน์ เป็นพิกเซล

ตัวอย่าง

ก่อนอื่นมาสร้างองค์ประกอบพ่อแม่ และทำให้มันเป็นกริดคอนเทนเนอร์ สมมติว่ามี div ซึ่งภายในมี องค์ประกอบลูกสี่อัน กำหนดให้มัน ในคุณสมบัติ display เป็นค่า grid และในคุณสมบัติ grid-template-columns เขียนความกว้างสำหรับสองคอลัมน์:

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

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

ตัวอย่าง

ตอนนี้มาสร้างตาราง ที่มีสี่คอลัมน์ ขนาดต่างกัน:

<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: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

แบบฝึกหัด

สมมติว่าคุณมี div ที่มีองค์ประกอบลูก เก้าอัน ทำให้องค์ประกอบพ่อแม่ เป็นกริดคอนเทนเนอร์

จัดวางองค์ประกอบลูกไว้ในสอง คอลัมน์ ความกว้าง 200px

จัดวางองค์ประกอบลูกไว้ในสาม คอลัมน์ ความกว้าง 150px

จัดวางองค์ประกอบลูกไว้ในสาม คอลัมน์: อันแรกกว้าง 100px อันที่สอง 150px และอันที่สาม 200px