Ví dụ CSS Grid Bài 5: Explicit and Implicit Grid

Explicit và Implicit Grid hay còn gọi là lưới rõ ràng và lưới ngầm định.

Khi chúng ta sử dụng grid-template-columns và grid-template-rows, chúng đang ta tạo một lưới (Grid) rõ ràng.

Tuy nhiên, nếu chúng ta thử và đặt một mục bên ngoài lưới đó, trình duyệt sẽ tạo một đường hoặc đường lưới Implicit Grid để giữ mục đó.

Trong đoạn code dưới đây tôi đã đặt mục e giữa các dòng cột lưới 1 và 6, nó không được mô tả trong lưới rõ ràng, do đó, 3 dòng lưới ngầm thứ đã được tạo ra.

Tận dụng lưới ngầm định (Implicit Grid) để thiết lập kích thước

Trước tiên thiết lập lưới như sau:

Demo code:

Bây giờ hãy thay đổi css của mục e như sau:

        grid-column: 4 / 5;
        grid-row: 1 / 6;

Ở đây tôi đã thay đổi từ grid-row: 1 / 3; thành grid: 1 / 6;

Do đó đã có 3 lưới ngầm được tạo ra để giữ mục e.

Kích thước lưới ngầm định

Theo mặc định, các đường lưới ngầm được tạo bởi các đường ngầm sẽ được tự động định kích thước.

Tuy nhiên, bạn có thể thiết lập kích thước với thuộc tính grid-auto-columns và grid-auto-rows. Tôi đã thiết lập kích thước các grid-auto-columns là 100px để phù hợp với kích thước đã khai báo.

NOTE: Hãy làm lại với 7 phiên bản khác nhau

Tặng bạn 2 câu nói:

"Thiên tài chỉ khác người bình thường ở sự chăm chỉ"

- Khuyết Danh

"Tất cả thiên tài đều đã từng là một đứa trẻ"

- Khuyết Danh

CSS Grid là tương lai của front-end vì tính sắp xếp 2 chiều cực kỳ linh động. Hãy theo hết seri này bạn sẽ có được sức mạnh thượng thừa của Grid.

Bài tiếp theo: Ví dụ CSS Grid Bài 6: Grid areas