Grid

• Grid là kiểu hiển thị bố cục dạng lưới

• Grid gồm hai phần:

  • Container

  • Item

Thuộc tính áp dụng cho grid container:

Property	Value
display	grid : chỉ định kiểu hiển thị dạng lưới cho container
grid-template	a1px b1px c1px … n1px / a2px b2px c2px ... n2px a1, b1, c1, … , n1: chiều cao của từng hàng theo thứ tự (bắt đầu từ 1) a2, b2, c2, ... , n2: chiều rộng của từng cột theo thứ tự (bắt đầu từ 1) Có bao nhiêu giá trị tương ứng với bấy nhiêu hàng/ cột auto auto … auto: Chiều dài của cột/ Chiều cao của hàng được xác định bởi chiều dài/ chiều cao của Grid Container
gap	apx bpx a: độ rộng khoảng trống giữa các hàng b: độ rộng khoảng trống giữa các cột item

Thuộc tính áp dụng cho grid items

Property	Value
grid-area	a / b / span c / span d a: chỉ số hàng của item b: chỉ số cột của item c: số lượng hàng mà item trải dài d: số lượng cột mà item trải dài