Mọi thuộc tính CSS grid thông dụng, nhóm theo nơi áp dụng: container, item và đơn vị kích thước. Mỗi dòng ghép thuộc tính với các giá trị phổ biến của nó.
Grid bố cục phần tử theo hai chiều: hàng và cột cùng lúc. Đặt display: grid trên phần tử cha, định nghĩa các track bằng grid-template-columns và grid-template-rows, rồi đặt các phần tử con vào ô. Dùng grid cho bố cục trang và card; dùng flexbox cho các thanh một chiều. Hai mô hình kết hợp tự do.
Bảng tham chiếu · 33 mục
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Biến phần tử thành grid container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Định nghĩa các cột và độ rộng của chúng.
auto 1fr auto
Định nghĩa các hàng và chiều cao của chúng.
[main-start] 1fr [main-end]
Đặt tên cho các grid line trong template và đặt item theo những tên đó.
1rem | 8px 16px
Khoảng trống giữa các hàng và cột.
"header header" "nav main"
Đặt tên cho các ô để việc đặt vị trí dễ đọc.
"head head" 64px "nav main" 1fr / 200px 1fr
Đặt hàng, cột và area trong một shorthand.
repeat(2, 1fr) / auto-flow 80px
Đặt mọi thuộc tính track và grid-auto-flow trong một khai báo.
minmax(80px, auto)
Đặt chiều cao cho các hàng mà template không định nghĩa.
120px | minmax(0, 1fr)
Đặt độ rộng cho các cột mà template không định nghĩa.
row | column | row dense
Chọn trục cho các item chưa được đặt; dense lấp đầy các khoảng trống trước đó.
start | center | end | stretch
Căn từng item bên trong ô theo trục hàng.
start | center | end | stretch
Căn từng item bên trong ô theo trục cột.
center | start end
Đặt align-items và justify-items trong một khai báo.
start | center | space-between
Căn lưới các track bên trong container theo trục hàng.
start | center | space-between
Căn lưới các track bên trong container theo trục cột.
center | end start
Đặt align-content và justify-content trong một khai báo.
Item
1 / 3 | span 2
Đặt vị trí item theo cột hoặc trải nó qua nhiều cột.
1 / 2 | span 3
Đặt vị trí item theo hàng hoặc trải nó qua nhiều hàng.
grid-column: 2 / -1
Đếm line từ cuối lưới; -1 là line cuối cùng.
header | 1 / 1 / 2 / 3
Đặt tên hoặc định vị hoàn toàn item trong một shorthand.
start | center | end | stretch
Căn riêng item này bên trong ô theo trục hàng.
start | center | end | stretch
Căn riêng item này bên trong ô theo trục cột.
center | start end
Đặt align-self và justify-self trong một khai báo.
Đơn vị kích thước
1fr | 2fr
Một phần của khoảng trống còn lại trong track.
auto | 1fr auto
Định cỡ track theo nội dung; việc căn chỉnh có thể kéo giãn nó.
min-content | max-content
Định cỡ track theo nội dung nhỏ nhất hoặc lớn nhất.
fit-content(180px)
Định cỡ track theo nội dung nhưng không vượt quá mức giới hạn đã cho.
minmax(200px, 1fr)
Giới hạn track giữa một mức tối thiểu và một mức tối đa.
repeat(4, 1fr)
Lặp lại một mẫu track mà không phải gõ từng cái.
repeat(auto-fit, minmax(120px, 1fr))
Thêm bao nhiêu track vừa đủ; auto-fit thu gọn các track rỗng.
grid-template-columns: subgrid
Khiến lưới lồng dùng chung track và tên line của lưới cha.
grid-template-rows: masonry
Thử nghiệm: xếp item vào cột theo chiều cao thay vì các hàng cố định.