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

คอนเทนเนอร์ที่สร้างขึ้น

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): สามคอลัมน์แบ่งความกว้างที่เหลือเท่ากัน 1fr คือหนึ่งส่วนของพื้นที่ที่เหลือ และ minmax(0, 1fr) ยอมให้คอลัมน์หดเล็กกว่าขนาดของเนื้อหา
• gap: ระยะห่างระหว่างแต่ละแทร็ก
• มีเดียเควอรีสลับเป็น repeat(auto-fit, minmax(220px, 1fr)) ซึ่งสร้างคอลัมน์ให้มากที่สุดเท่าที่พอ โดยแต่ละคอลัมน์กว้างอย่างน้อย 220px จุดแบ่งคือจำนวนคอลัมน์คูณกับความกว้างต่ำสุด (ขั้นต่ำ 120px) ดังนั้นบนจอเล็กกริดจะเลื่อนลงแถวใหม่แทนที่จะถูกบีบ

หน่วย fr

fr แปลว่า “หนึ่งส่วนของพื้นที่ที่เหลือ”: หลังจากหักแทร็กขนาดคงที่แล้ว พื้นที่ที่เหลือจะถูกหารด้วยจำนวนหน่วย fr ทั้งหมด

grid-template-columns: 200px 1fr 2fr;

บนคอนเทนเนอร์กว้าง 1000px คอลัมน์แรกกินพื้นที่ 200px และอีก 800px ที่เหลือแบ่งกัน 1:2 คือ 267px และ 533px

auto-fill กับ auto-fit

• auto-fill: สร้างแทร็กว่างสำรองเมื่อมีองค์ประกอบไม่พอ
• auto-fit: ยุบแทร็กว่างให้เป็นศูนย์ องค์ประกอบที่เหลือจึงยืดเต็มแถว

ทางเลือกแบบตอบสนองใช้ auto-fit ซึ่งตรงกับที่กริดการ์ดต้องการ: แถวดูเต็มอยู่เสมอ

คอลัมน์ความกว้างต่างกัน

เครื่องมือสร้างคอลัมน์เท่ากัน แก้ไขผลลัพธ์เพื่อผสมขนาด: grid-template-columns: 200px 1fr 2fr; ให้แถบข้างแบบคงที่และสองคอลัมน์ยืดหยุ่นในอัตรา 1:2 สำหรับพื้นที่ที่มีชื่อ (grid-template-areas) หรือการวางแบบระบุตำแหน่ง (grid-column: 1 / 3) ให้เพิ่มกฎเหล่านี้เองบนคอนเทนเนอร์ที่สร้างไว้

Grid กับ Flexbox

• Grid: เลย์เอาต์ 2 มิติแบบระบุชัดเจนด้วยแทร็ก เหมาะเมื่อเลย์เอาต์มีโครงสร้างทั้งแถวและคอลัมน์ (โครงหน้าของหน้าเพจ แกลเลอรี แดชบอร์ด)
• Flexbox: การจัดเรียง 1 มิติตามแกนเดียว เหมาะเมื่อองค์ประกอบไหลตามธรรมชาติ (แถบนำทาง แถวปุ่ม)

เลย์เอาต์จริงมักผสมทั้งสอง: Grid สำหรับโครงหน้าของหน้าเพจ และ Flexbox ภายในคอมโพเนนต์

ข้อผิดพลาดที่พบบ่อย

• ลืม min-width: 0 บนองค์ประกอบลูก: องค์ประกอบกริดใช้ความกว้างต่ำสุดของเนื้อหาเป็นค่าเริ่มต้น ทำให้คอลัมน์ fr หดเล็กกว่าคำยาวที่สุดไม่ได้ ใส่ min-width: 0 ให้ลูกเพื่อให้หดได้
• ซ้อนกันโดยไม่มี display: grid: ลูกของกริดไม่ได้เป็นกริดเองจนกว่าคุณจะประกาศ