Ví dụ CSS Grid Bài 10: Cách bố trí phần tử tự động

Bài này chúng ta sẽ tìm hiểu cách Grid tự động bố trí các phần tử như thế nào. Và chúng ta có thể can thiệp để thay đổi cách tự động bố trí ra sao.

Grid sẽ tự động bố trí các phần tử nếu ta không định vị chúng

Nếu bạn khai báo một Grid nhưng không định vị các phần tử con thì thuật toán auto-placememt sẽ ra lệnh cho trình duyệt nên làm gì với các phần tử đang không được định vị.

Trong ví dụ này, tôi có một bộ 12 ô. Tôi đã sử dụng nth-child() để chuyển màu nền trên các hộp để làm cho ví dụ này rõ ràng hơn.

Tôi đã tạo một Grid và tạo ra các hàng và cột nhưng không được định vị bất kỳ phần tử con nào.

Như bạn có thể thấy tất cả các hộp nằm trên Grid mặc dù không có vị trí nào được gán cho chúng.

Như trong ví dụ sau:

Chúng ta có thể thấy, mặc dù không định vị phần tử con nào nhưng Grid đã tự động bố trí theo hàng từ trái qua phải.

Thay đổi cách bố trí phần tử theo cột

Trong quá trình thiết kế website bạn cũng có thể sẽ gặp yêu cầu sắp xếp các phần tử theo cột mà không phải theo hàng. Vậy phải làm thế nào?

Theo mặc định Grid sẽ tự động bố trí các phần tử theo hàng cho đến khi hết phần tử.

Nếu một hàng chưa được khai báo thì lưới ngầm định sẽ được tạo ra để giữ các phần tử.

Nếu bạn không thích Grid tự động bố trí theo hàng thì có thể chuyển sang bố trí theo cột. Sử dụng thuộc tính:

grid-auto-flow: column;

Hãy xem code để hiểu rõ hơn.

Các phần tử bây giờ đã tự động bố trí theo cột, hết chỗ bố trí thì sẽ chuyển sang cột tiếp theo và thứ tự là tư trên xuống dưới.

Kết hợp tự động bố trí và thiết lập vị trí cho các phần tử

Thông thường chúng ta thiết lập vị trí cho các phần tử mà không thiết lập cho tất cả thì bản chất chúng ta đang kết hợp giữa: Tự động bố trí + Thiết lập vị trí.

Như trong ví dụ sau đây:

Ví dụ này đang sử dụng thiết lập mặc định bố trí theo hàng của Grid. Nếu bạn muốn tự động bố trí các phần tử khác theo cột thì thêm thuộc tính grid-auto-flow: column; như đã nói ở trên vào class .wrapper

Kết quả như hình:

Kết hợp tự động bố trí theo cột và thiết lập vị trí cho khối 2

Ở đây tôi không ví dụ code trong codepen luôn. Mà để các bạn tự tay thay đổi để hiểu cách nó hoạt động.

Như vậy là chúng ta đã tìm hiểu xong cách grid tự động bố trí và cách chúng ta can thiệp cách tự động bố trí đối với các phần tử không được xác định vị trí cụ thể.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Bài tiếp theo: Ví dụ CSS Grid Bài 11: Auto-fit và Auto-fill