Thuộc tính CSS grid-gap

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

Thuộc tính grid-gap định nghĩa kích thước khoảng cách giữa hàng và cột trong布局 lưới, nó là thuộc tính tóm tắt của các thuộc tính sau:

Lưu ý:Thuộc tính này đã được đổi tên trong CSS3 thành gap.

Xem thêm:

Hướng dẫn CSS:Lưới CSS

Cuốn sách tham khảo CSS:Thuộc tính grip-row-gap

Cuốn sách tham khảo CSS:Thuộc tính grip-column-gap

Mô hình

Ví dụ 1

Đặt tóm tắt khoảng cách giữa hàng và cột là 50 pixel:

.grid-container {
  grid-gap: 50px;
}

Thử ngay

Ví dụ 2

Đặt khoảng cách hàng là 20 pixel, khoảng cách cột là 50 pixel:

.grid-container {
  grid-gap: 20px 50px;
}

Thử ngay

Ngữ pháp CSS

grid-gap: grid-row-gap grid-column-gap;

Giá trị thuộc tính

Giá trị Mô tả
grid-row-gap Đặt kích thước khoảng cách hàng trong布局 lưới. Giá trị mặc định là 0.
grid-column-gap Đặt kích thước khoảng cách cột. Giá trị mặc định là 0.

Chi tiết kỹ thuật

Giá trị mặc định: 0 0
Kế thừa: Không
Chế tạo animation: Hỗ trợ. Đọc thêm:Thuộc tính liên quan đến animation.
Phiên bản: Module Layout Grid CSS Level 1
Ngữ pháp JavaScript: object.style.gridGap="50px 100px"

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

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