Thuộc tính grid-auto-flow của CSS

Định nghĩa và cách sử dụng

Thuộc tính grid-auto-flow kiểm soát cách các mục tự động đặt được chèn vào lưới.

Xem thêm:

Hướng dẫn CSS:CSS Grid Layout

Mẫu

Ví dụ 1

Chèn các mục tự động đặt theo cột:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Thử ngay

Ví dụ 2

Lấp đầy tất cả các lỗ trong lưới bằng cách thêm giá trị "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị Mô tả
row Giá trị mặc định. Đặt các mục bằng cách lấp đầy mỗi hàng.
column Đặt các mục bằng cách lấp đầy mỗi cột.
dense Đặt các mục để lấp đầy các lỗ trong lưới.
row dense Đặt các mục để lấp đầy các lỗ trong lưới bằng cách lấp đầy mỗi hàng và lấp đầy bất kỳ lỗ nào trong lưới.
column dense Đặt các mục để lấp đầy các lỗ trong lưới bằng cách lấp đầy mỗi cột và lấp đầy bất kỳ lỗ nào trong lưới.

Chi tiết kỹ thuật

Giá trị mặc định: row
Kế thừa: Không
Animation制作: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS Grid Layout Module Level 1
Cú pháp JavaScript: object.style.gridAutoFlow="row dense"

Hỗ trợ trình duyệt

Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44