Basic Grid Layout
การจัด Layout แบบ 2 มิติด้วย Grid Rows และ Grid Columns
Header
Sidebar
Content
Footer
Defining Columns and Rows
Fixed Columns & Rows
1
2
3
4
5
6
Flexible Columns (fr unit)
Col 1 (1fr)
Col 2 (2fr)
Col 3 (1fr)
Named Grid Lines
Header Area
Nav Area
Main Content
Sidebar
Footer Area
Grid Gap
ช่องว่างระหว่าง Grid Cells
1
2
3
4
Grid Span
ทำให้ Item ครอบคลุมหลาย Columns/Rows
Span 2 Columns
2
3
Span 2 Rows
5
6