ความรู้เบื้องต้นเกี่ยวกับ CSS Grid

CSS Grid เป็นวิธีการจัดวางองค์ประกอบ ทั้งในแนวนอนและแนว vertical พร้อมกัน นี่เป็นวิธีการที่ก้าวหน้ากว่า Flexbox แต่ก็ซับซ้อนกว่าในการเรียนรู้

เพื่อสร้าง Grid คุณต้องกำหนดคุณสมบัติ display ให้มีค่าเป็น grid:

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

#parent {
	display: grid;
}

หลังจากนั้น องค์ประกอบนั้นจะกลายเป็นตารางสองมิติ โดยที่องค์ประกอบย่อยจะถูกจัดวาง ตามแนวตั้ง (คอลัมน์) และแนวนอน (แถว) พื้นที่ที่เกิดจากการตัดกันของคอลัมน์และแถว เรียกว่า เซลล์

โดยการใช้คุณสมบัติเฉพาะ เราสามารถ จัดวางองค์ประกอบได้ทั้งตามแถว และตามคอลัมน์ สิ่งนี้จะทำให้สามารถ สร้างสิ่งต่างๆ เช่นตัวอย่างนี้ได้ง่ายขึ้น:

ในบทเรียนต่อไป เราจะเริ่มศึกษา การจัดวางองค์ประกอบตามคอลัมน์ก่อน จากนั้นจึงไปศึกษาเกี่ยวกับแถว และหลังจากนั้นจะนำทั้งหมดมารวมกัน