CSS Grid

Grid Layout

• Grid gồm rows + columns. Ta có thể sizing rows, columns với size của content.

• Hình dung layout dạng lưới, và ta có thể đặt các items ở bất kì vị trí nào trong lưới đó.

• Grid lines: Các đường kẻ trong grid container

• Grid tracks: Space between 2 grid lines.

• Grid cell: Ô trong lưới

• Grid area: Gộp của 1 vài ô trong lưới.

• Gap: Khoảng trống giữa các ô.

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 150px;
}

Với code trên, grid layout sẽ gồm 2 hàng, 3 cột:

• 3 cột có size: 100px, 200px và 100px ⇒ Tạo ra 3 column tracks

• 2 hàng với kích thước là: 50px và 150 px ⇒ Tạo ra 2 row tracks

• grid-template-columns - Set size cho từng column

  • Khác với grid-template-rows, set bao nhiêu giá trị cho grid-template-columns thì sẽ có bấy nhiêu cột.

• grid-template-rows - Set size cho từng row.

  • Nếu có 5 row mà chỉ set dạng grid-template-rows: 50px 150px; thì 3 rows còn lại sẽ có size auto.

Intrinsic Sizing

Eg: grid-template-column: min-content

• min-content, max-content, fit-content()
  • min-content: Kích thước tối thiểu mà 1 phần tử có thể có dựa trên nội dung bên trong nó.
    • Phần tử sẽ co lại đến kích thước nhỏ nhất mà không làm tràn hoặc gãy dòng nội dung bên trong.
    • Đối với văn bản, min-content sẽ tính toán chiều rộng nhỏ nhất mà văn bản có thể chiếm, nên nó sẽ xuống dòng ở mọi từ để chiếm ít không gian nhất
  • max-content: Kích thước tối đa mà một phần tử có thể có dựa vào nội dung bên trong.
    • Phần tử sẽ mở rộng đến kích thước lớn nhất có thể, không xuống dòng, giữ nguyên chiều rộng để hiển thị tất cả nội dung trong 1 dòng.
    • Đối với văn bản, max-content sẽ đảm bảo toàn bộ văn bản được hiển thị trên 1 dòng duy nhất, dẫn đến cột có thể rất rộng nếu văn bản dài.
  • fit-content: Kết hợp linh hoạt giữa min-content và max-content, cho phép bạn đặt giới hạn tối đa cho kích thước của 1 phần tử, nhưng nó vẫn sẽ co dãn theo nội dung.
    • Nhận 1 kích thước cụ thể, phần tử sẽ co dãn cho đến khi đạt được kích thước đó, hoặc dừng ở kích thước phù hợp với nội dung.
    • Nếu nội dung nhỏ hơn giá trị giới hạn, cột/hàng sẽ co lại theo kích thước của nội dung.
    • Nếu nội dung lớn hơn giá trị giới hạn, cột/ hàng sẽ giới hạn ở kích thước mà bạn cung cấp.

The fr unit

• fr unit hoạt động tương tự flex: auto. Nó sẽ phân bổ space sau khi các items đã nằm vào vị trí.

The minmax() function

• Set minimum và maximum size for a track. eg: minmax(auto, 1fr)

repeat() notation

• Lặp đi lặp lại layout. Ta chỉ cần define grid size cho 1 row, sau đó lặp lại cho các rows khác.

auto-fill and auto-fit

• auto-fill: Trình duyệt sẽ tạo càng nhiều cột/ hàng vừa vặn với chiều rộng của container. Nếu không đủ các phần tử để lấp đầy các track, các track trống vẫn sẽ được tạo.
• auto-fit: Trình duyệt sẽ tạo “vừa vặn” cách track có chứa phần tử. Nếu không có đủ phần tử để lấp đầy grid nó sẽ không tạo track trống. Các track hiện tại sẽ giãn ra để lấp đầy khoảng trống.

Auto-placement

Placing items in columns

• grid-auto-flow: column - Auto put items into column, but you need to define row tracks.

Spanning tracks

• Sau khi đã đặt các items vào grid layout, ta có thể thay đổi kích thước của các items trong grid container bằng cách set spanning cho nó.
• grid-column-end - item1 sẽ được “end” ở column số mấy trong layout.

Filling gaps

• Problem: Khi define layout grid, các items trong đó có thể có spanning khác size. Nếu không đủ khoảng trống thì nó sẽ phải xuống dòng tiếp theo. Việc này có thể tạo thành các gap.
• grid-auto-flow: row dense - grid layout sẽ lấy items phù hợp để fill vào chỗ gap (⇒ order sẽ k hoạt động)

Placing items

The first thing to remember is that CSS Grid Layout is based on a grid of numbered lines.

Cách đơn giản nhất là hiển thị items theo đúng thứ tự. Ngoài ra, ta có thể config đặt item vào đúng vị trí hàng, cột mong muốn bằng các thuộc tính

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Short hand:

• grid-column
• grid-row
  • grid-row: 2 / -1 ⇒ items sẽ start từ dòng thứ 2, cho tới dòng thứ -1 từ cuối. (giống với array index trong Ruby)

Stacking items

• Display items trong grid vào cùng 1 vị trí (đè lên nhau, sử dụng trong list ảnh chẳng hạn), sử dụng z-index
• Khi các items đều được chỉ định nằm vào 1 vị trí (ví dụ: dòng 2, cột 3), thì item nào xuất hiện sau sẽ đè lên items xuất hiện trước. Muốn nó xuất hiện lên thì phải tăng z-index của nó lên.

Sizing implicit tracks

• Sử dụng grid-auto-rows và grid-auto-column với giá trị minmax để trình duyệt có thể tự động phân bổ size cho từng tracks.

Named grid lines

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}
 
.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

Đặt tên cho các vị trí để có thể đặt items vào đúng vị trí. Ví dụ trên, ta đặt tên cho các vị trí main-start, aside-start, … sau đó đặt phần tử .sidebar vào đúng vị trí.

Others

• grid-area
• grid-template-areas
• grid-template

Use cases

• Trong layout grid, các ô sẽ không tự động expand để fit với content. Nếu chữ trong box dài quá, nó sẽ bị tràn ra ngoài. Có thể fix bằng: grid-auto-rows: minmax(auto, max-content);, hoặc justify-content: flex-start, sau đó cắt bớt/ ẩn chữ thừa.

Resources

• CSS Grid Layout Guide | CSS-Tricks
• Grid  |  web.dev