1. Khái niệm và tổng quan: Bố cục lưới
2. Main concept
   1. Grid container
      1. Là toàn bộ không gian được phân chia thành lưới
   2. Grid Item
      1. Là một phần tử trong grid (grid-item cũng có thể là 1 grid-cell hoặc 1 grid-area tuỳ định nghĩa)
   3. Row và column
      1. Chính là các phần tử (grid cell) được sắp xếp theo chiều ngang hoặc theo chiều dọc.
   4. Track
      1. Là các rãnh lưới (khoảng không gian giữa các đường lưới)
   5. Grid line
      1. Là một đường lưới
   6. Grid cell
      1. Là đơn vị nhỏ nhất trong grid
   7. Grid area
      1. Là một vùng chứa trong grid bao gồm các grid-cell gần nhau.
      2. Grid area phải là một hình chữ nhật
3. Grid container
   1. Display: grid
   2. Column-gap, row-gap, gap
      1. là cách thiết lập các khoảng cách giữa các hàng, cột
   3. Bao gồm 3 tư duy phân bổ chính
      1. Phân bổ theo các hàng và cột
      2. Phân bổ theo line
      3. Phân bổ theo vùng (area)
4. Cách 1: Phân bổ theo rows và columns
   1. Grid-template-columns/Grid-template-rows: Chỉ định cụ thể số lượng và kích thước của hàng, cột. VD: grid-template-columns: 200px 100px 300px.
   2. Grid-auto-rows/Grid-auto-columns: Khi không chỉ định cụ thể chiều cao hoặc chiều rộng cho từng hàng cột, ta sử dụng giá trị "auto" để thiết lập kích thước tự động theo nội dung.
5. Hàm và đơn vị sử dụng và giá trị đặc biệt
   1. fr = fraction -> đơn vị tương đối sử dụng trong grid với ý nghĩa là 1 phần. (khá giống với flex-grow, flex-shrink)
   2. repeat(3, 1fr) -> cú pháp giúp giảm viết code lặp lại cho các phân đoạn bằng nhau. VD: repeat(3 1fr, 2fr)
   3. minmax(min-value, max-value) -> hàm chỉ định giá trị min và giá trị max. VD: grid-auto-rows: minmax(60px, auto)
   4. Auto-fill
      1. Tự động tạo thêm tối đa các cột trên cùng một hàng để lấp đầy hàng.
      2. .grid-container--fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
   5. Auto-fit
      1. Ngược với auto-fill, auto-fit sẽ cố gắng co giãn để lấp đầy không gian trống với phần content có sẵn.
   6. min-content, max-content
      1. Xác định kích thước phần từ phụ thuộc vào việc tối đa nội dung hoặc tối thiểu không gian khả dụng của nội dung
6. Phân bổ theo Grid-line (Viết trong grid-item)
   1. Giải pháp phân bổ theo grid-line sẽ giới hạn chặn đầu và chặn cuối các area bởi các line.
   2. Grid-column-start: 2
   3. Grid-column-end: 4
   4. Grid-row-start: 2
   5. Grid-row-end: 4
   6. Short-hand: Grid-column: 2 / 4, hoặc grid-row: 2 / 4.
   7. Đôi khi sử dụng span để khai báo phần mở rộng của một hàng hoặc cột. VD 1: grid-column: 2 / span 4. /*có nghĩa là bắt đầu từ cột 2 và kéo dài 4 cột */ VD 2: grid-column: span 2; /* Chiếm 2 cột */
   8. Khi truyền chỉ số âm, Grid sẽ được đánh index ngược từ cuối lên (Giá trị -1 là grid-line cuối cùng)
7. Phân bổ theo grid-area (kết hợp trong grid-container và grid-item)
   1. Định nghĩa tên area trong grid-container
      1. Grid-template-area: "aa aa" "bb bb"
   2. Sử dụng trong grid-item
      1. Grid-area: aa
      2. Không nhất thiết sử dụng "" khi dùng grid-item.
      3. Sử dụng cách đặt tên biến theo kebab case
   3. Short-hand: Grid-template
      1. là cú pháp rút gọn kết hợp cả 3 thuộc tính grid-template-columns, grid-template-rows, grid-area
      2. VD: grid-template: 100px 200px / 1fr 2fr 1fr;
      3. VD: grid-template: 'header header header' 100px 'sidebar main main' 1fr 'footer footer footer' 50px / 1fr 2fr 1fr;
8. Các thuộc tính khác
   1. justify-items
      1. Căn theo chiều ngang (căn các cột với nhau)
      2. Nhận các giá trị như start, end, center, stretch.
   2. align-items
      1. Căng theo chiều dọc (căn các dòng với nhau)
   3. place-items
      1. Là cách viết kết hợp align-items, justify-items
      2. place-items: <align-items> <justify-items>;
9. Kết luận
   1. Grid CSS là chiến lược xây dựng layout hiện đại và rất mạnh mẽ, tuy nhiên tránh lạm dụng và sử dụng một cách phức tạp dẫn đến việc code khó hiểu, khó bảo trì và dài dòng không cần thiết.
   2. Nên sử dụng kết hợp Grid CSS và Flexbox để đạt được hiệu quả cao nhất.