Sân chơi CSS Grid

Giới thiệu về Sân chơi CSS Grid

CSS Grid Playground giúp bạn dựng các bố cục grid thực thụ bằng thao tác trực quan. Thêm và bớt các track cột, hàng để định hình grid-template-columns và grid-template-rows, thiết lập khoảng cách cột/hàng, và tinh chỉnh cả bốn thuộc tính căn chỉnh — justify-items, align-items, justify-content và align-content — trong khi bản xem trước phản ánh ngay lập tức từng thay đổi.

Việc định vị phần tử mới là chỗ grid phát huy sức mạnh: thêm phần tử, click chọn một phần tử trong bản xem trước rồi định vị nó bằng column start, column span, row start và row span. Đó chính là cách các thanh bên, phần đầu trang và ô nổi bật trải rộng qua nhiều track — kỹ thuật đứng sau hầu hết mọi bố cục grid thực tế.

Ba preset — holy grail, dashboard và gallery — nạp sẵn các cấu trúc trang kinh điển để bạn phân tích và tùy biến. Khi bố cục đã ưng ý, sao chép đoạn CSS được sinh ra, bao gồm đầy đủ quy tắc container grid và vị trí của từng phần tử.

Cách sử dụng Sân chơi CSS Grid

1. Thêm hoặc bớt các track cột và hàng để định nghĩa grid template.
2. Thiết lập khoảng cách cột (column gap) và hàng (row gap).
3. Điều chỉnh các thiết lập căn chỉnh: justify-items, align-items, justify-content và align-content.
4. Thêm phần tử, click chọn một phần tử trong bản xem trước, rồi đặt column/row start và span để định vị nó.
5. Nạp preset holy grail, dashboard hoặc gallery để nghiên cứu một bố cục kinh điển.
6. Sao chép đoạn CSS được sinh ra vào stylesheet của bạn.

Câu hỏi thường gặp