| Container |
|---|
| grid | inline-grid | เปลี่ยนอิลิเมนต์ให้เป็น grid container |
| 1fr 1fr | repeat(3, 1fr) | 200px 1fr | กำหนดคอลัมน์และความกว้างของคอลัมน์ |
| auto 1fr auto | กำหนดแถวและความสูงของแถว |
| [main-start] 1fr [main-end] | ตั้งชื่อเส้นกริดในเทมเพลต แล้ววาง item ตามชื่อเหล่านั้น |
| 1rem | 8px 16px | ช่องว่างระหว่างแถวและคอลัมน์ |
| "header header" "nav main" | ตั้งชื่อเซลล์เพื่อให้อ่านการจัดวางได้ง่าย |
| "head head" 64px "nav main" 1fr / 200px 1fr | กำหนดแถว คอลัมน์ และพื้นที่ในรูปย่อเดียว |
| repeat(2, 1fr) / auto-flow 80px | กำหนดพร็อพเพอร์ตี้แทร็กทั้งหมดและ grid-auto-flow ในการประกาศเดียว |
| minmax(80px, auto) | กำหนดความสูงของแถวที่เทมเพลตไม่ได้กำหนด |
| 120px | minmax(0, 1fr) | กำหนดความกว้างของคอลัมน์ที่เทมเพลตไม่ได้กำหนด |
| row | column | row dense | เลือกแกนสำหรับ item ที่ยังไม่ถูกวาง ส่วน dense จะเติมช่องว่างที่เกิดก่อนหน้า |
| start | center | end | stretch | จัด item แต่ละตัวภายในเซลล์ตามแกนแถว |
| start | center | end | stretch | จัด item แต่ละตัวภายในเซลล์ตามแกนคอลัมน์ |
| center | start end | กำหนด align-items และ justify-items ในการประกาศเดียว |
| start | center | space-between | จัดกริดของแทร็กภายใน container ตามแกนแถว |
| start | center | space-between | จัดกริดของแทร็กภายใน container ตามแกนคอลัมน์ |
| center | end start | กำหนด align-content และ justify-content ในการประกาศเดียว |
| Item |
|---|
| 1 / 3 | span 2 | วางตำแหน่ง item ตามคอลัมน์ หรือให้ครอบคลุมหลายคอลัมน์ |
| 1 / 2 | span 3 | วางตำแหน่ง item ตามแถว หรือให้ครอบคลุมหลายแถว |
| grid-column: 2 / -1 | นับเส้นจากปลายกริด โดย -1 คือเส้นสุดท้าย |
| header | 1 / 1 / 2 / 3 | ตั้งชื่อ item หรือวางตำแหน่งแบบสมบูรณ์ในรูปย่อเดียว |
| start | center | end | stretch | จัด item ตัวนี้ภายในเซลล์ตามแกนแถว |
| start | center | end | stretch | จัด item ตัวนี้ภายในเซลล์ตามแกนคอลัมน์ |
| center | start end | กำหนด align-self และ justify-self ในการประกาศเดียว |
| หน่วยการกำหนดขนาด |
|---|
| 1fr | 2fr | ส่วนแบ่งหนึ่งของพื้นที่ว่างในแทร็ก |
| auto | 1fr auto | กำหนดขนาดแทร็กตามเนื้อหา การจัดวางสามารถยืดมันได้ |
| min-content | max-content | กำหนดขนาดแทร็กตามเนื้อหาที่เล็กที่สุดหรือใหญ่ที่สุด |
| fit-content(180px) | กำหนดขนาดแทร็กตามเนื้อหาแต่ไม่เกินขีดจำกัดที่กำหนด |
| minmax(200px, 1fr) | จำกัดแทร็กไว้ระหว่างค่าต่ำสุดและค่าสูงสุด |
| repeat(4, 1fr) | ทำซ้ำรูปแบบแทร็กโดยไม่ต้องพิมพ์ทีละอัน |
| repeat(auto-fit, minmax(120px, 1fr)) | เพิ่มแทร็กเท่าที่พอดี ส่วน auto-fit จะยุบแทร็กที่ว่างเปล่า |
| grid-template-columns: subgrid | ทำให้กริดซ้อนใช้แทร็กและชื่อเส้นของพาเรนต์ร่วมกัน |
| grid-template-rows: masonry | ยังเป็นการทดลอง: จัด item ลงคอลัมน์ตามความสูงแทนแถวตายตัว |