Trang chủ
CSS
Mục lưới CSS
Tryit: Bố cục lưới năm mục
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> .grid-container { display: lưới; khoảng cách: 10px; màu nền: #2196F3; phần đệm: 10px; } .grid-item { màu nền: rgba(255, 255, 255, 0.8); căn chỉnh văn bản: giữa; phần đệm: 20px; cỡ chữ: 30px; } .item1 { cột lưới: 1/nhịp 2; hàng lưới: 1; } .item2 { cột lưới: 3; hàng lưới: 1/nhịp 2; } .item5 { cột lưới: 1/nhịp 3; hàng lưới: 3; } </style> </head> <body> <h1>Bố cục lưới năm mục</h1> <div class="grid-container"> <div class="grid-item item1">1</div> <div class="grid-item item2">2</div> <div class="grid-item item3">3</div> <div class="grid-item item4">4</div> <div class="grid-item item5">5</div> </div> <p>(Các) phần tử con trực tiếp của vùng chứa lưới sẽ tự động trở thành các mục lưới.</p> <p>Mục 1, 2 và 5 được đặt để trải dài trên nhiều cột hoặc hàng.</p> </body> </html>