Grid CSS (Part 1 grid-column & grid-row)

วันนี้จะมาลองเขียน grid css กัน

row column gap

จาก code ด้านล่าง

html

css

ได้ผลลัพธ์ดังนี้

โดย grid จะแบ่งเป็น layout ดังนี้

repeat

เราสามารถแทนที่การเขียนซ้ำๆได้ดังนี้

repeat

fr

แต่ถ้าเราอยากให้ขนาดของ row หรือ column มีอัตราส่วนต่อกัน จะเป็นดังนี้

fr

fr result

grid-column

เราสามารถใช้ grid-column เพื่อบอกว่า child ควรจะลากจาก grid line ไหน ไปยัง grid line ไหน ได้

html

parent css

child css

จะได้ผลลัพธ์ตามนี้

result

โดย grid line แบ่งได้ตามนี้

grid line

และสุดท้าย refactor การเขียน grid line เป็น -1 แทน 13, การไม่ใส่ grid line ที่ไม่จำเป็น ได้ดังนี้

refactor -1

ส่วน grid-row ก็มีวิธีเขียนเหมือน grid-column เลย ลองดูนะ 555

โอเควันนี้เป็น basic มีวิธีการเขียนที่ดีกว่านี้ เดี๋ยวค่อยมาต่อ part 2 กัน