Các thuộc tính thường dùng trong Grid Layout có thể chia thành hai nhóm: thuộc tính áp dụng cho container (phần tử cha) và thuộc tính áp dụng cho các item (phần tử con bên trong container).

1. Thuộc tính Container

• display: Thiết lập chế độ hiển thị Grid.
  • grid: Container là phần tử khối (block).
  • inline-grid: Container là phần tử nội dòng (inline).

  Lưu ý: Khi sử dụng Grid, các thuộc tính như float, display: inline-block, display: table-cell, vertical-align và column-* trên các phần tử con sẽ không còn tác dụng.

• grid-template-columns: Xác định số cột và chiều rộng của mỗi cột.
• grid-template-rows: Xác định số hàng và chiều cao của mỗi hàng.
• row-gap / column-gap: Khoảng cách giữa các hàng và các cột.
• gap: Cú pháp rút gọn cho row-gap và column-gap.
• grid-template-areas: Định nghĩa các vùng (area) trong lưới.
• grid-auto-flow: Kiểm soát thứ tự tự động của các phần tử con trong lưới, mặc định là row (theo hàng trước, cột sau). Có thể đặt thành column (theo cột trước, hàng sau).
• justify-items: Căn chỉnh nội dung theo chiều ngang (trái, giữa, phải) bên trong mỗi ô.
• align-items: Căn chỉnh nội dung theo chiều dọc (trên, giữa, dưới) bên trong mỗi ô.
• place-items: Cú pháp rút gọn cho align-items và justify-items.
• justify-content: Căn chỉnh toàn bộ vùng lưới theo chiều ngang (trái, giữa, phải) trong container.
• align-content: Căn chỉnh toàn bộ vùng lưới theo chiều dọc (trên, giữa, dưới) trong container.
• place-content: Cú pháp rút gọn cho align-content và justify-content.
• grid-auto-columns / grid-auto-rows: Xác định kích thước cho các cột/hàng được tự động tạo thêm.
• grid-template: Cú pháp rút gọn cho grid-template-columns, grid-template-rows và grid-template-areas.
• grid: Cú pháp rút gọn tổng thể cho grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns và grid-auto-flow.

.grid-container {
  display: grid | inline-grid;

  /* Các giá trị cho grid-template-columns và grid-template-rows */
  grid-template-columns: none | <length> (px, %) | repeat(num/auto-fill/auto-fit, <length>) | <fr> | minmax(<min>, <max>) | auto | [<tên đường kẻ>] 100px;
  grid-template-rows: <tương tự cột>;

  row-gap: 0 | <length> (px, %);
  column-gap: 0 | <length> (px, %);

  gap: <row-gap> <column-gap>;

  grid-template-areas: none | <tên các item> ('a b c') | . (ô trống);

  grid-auto-flow: row | column | dense | row dense | column dense;

  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> <justify-items>;

  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: <tương tự justify-content>;
  place-content: <align-content> <justify-content>;

  grid-auto-columns: <tương tự grid-template-columns>;
  grid-auto-rows: <tương tự grid-template-rows>;

  grid-template: none | <rows> / <columns> | <areas>;
}

2. Thuộc tính Item (Thành viên Container)

Các thuộc tính này được áp dụng trực tiếp lên từng phần tử con trong Grid.

• grid-column-start / grid-column-end: Xác định vị trí bắt đầu/kết thúc của item trên trục cột dựa vào đường kẻ dọc.
• grid-row-start / grid-row-end: Xác định vị trí bắt đầu/kết thúc của item trên trục hàng dựa vào đường kẻ ngang.
• grid-column: Cú pháp rút gọn cho grid-column-start và grid-column-end.
• grid-row: Cú pháp rút gọn cho grid-row-start và grid-row-end.
• grid-area: Cho phép đặt tên item để tham chiếu với grid-template-areas, hoặc là cú pháp rút gọn gồm grid-row-start, grid-column-start, grid-row-end, grid-column-end.
• justify-self: Căn chỉnh nội dung theo chiều ngang trong ô, chỉ tác dụng lên item hiện tại.
• align-self: Căn chỉnh nội dung theo chiều dọc trong ô, chỉ tác dụng lên item hiện tại.
• place-self: Cú pháp rút gọn cho align-self và justify-self.

.item {
  grid-column-start: auto | span <số cột> | <đường kẻ cột>;
  grid-column-end: <tương tự grid-column-start>;
  grid-row-start: auto | <đường kẻ hàng>;
  grid-row-end: <tương tự grid-row-start>;

  grid-column: <grid-column-start> / <grid-column-end>;
  grid-row: <grid-row-start> / <grid-row-end>;

  grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end> | <tên vùng>;

  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
}