เครื่องมือสร้าง CSS Grid

CSS Grid คืออะไร?

CSS Grid Layout เป็นระบบเลย์เอาต์ที่ทรงพลังที่สุดใน CSS เป็นระบบสองมิติที่สามารถจัดการทั้งคอลัมน์และแถว ต่างจาก flexbox ที่เป็นระบบมิติเดียว

วิธีใช้เครื่องมือสร้าง CSS Grid นี้

คู่มือไวยากรณ์ CSS Grid

หัวใจของ CSS Grid ประกอบด้วยคุณสมบัติอย่าง grid-template-columns (เพื่อกำหนดความกว้างของคอลัมน์), grid-template-rows (เพื่อกำหนดความสูงของแถว) และ grid-gap (เพื่อตั้งค่าระยะห่าง) การใช้หน่วยเศษส่วน (fr) ช่วยให้เลย์เอาต์มีความยืดหยุ่นและปรับตามขนาดหน้าจอได้

ตัวอย่างการจัดเลย์เอาต์ด้วย CSS Grid

ตัวอย่างที่พบบ่อย ได้แก่ เลย์เอาต์ 'Holy Grail' (ส่วนหัว, แถบด้านข้าง, เนื้อหาหลัก, ส่วนท้าย) และเลย์เอาต์ 'Main/Sidebar' ด้วย grid-template-areas คุณสามารถกำหนดพื้นที่เหล่านี้ด้วยชื่อที่เข้าใจง่าย ทำให้โค้ดของคุณสะอาดและบำรุงรักษาได้ง่ายขึ้น

คำถามที่พบบ่อย