Sân chơi CSS Flexbox & Grid

Sân chơi CSS Flexbox & Grid là gì?

Sân chơi CSS Flexbox & Grid là một hộp cát trực quan miễn phí để học và tạo nguyên mẫu hai mô hình bố cục chính của CSS, dành cho lập trình viên front-end, học viên và nhà thiết kế. Chọn Flex hoặc Grid, đặt các thuộc tính vùng chứa và mở Cài đặt để tạo kiểu cho từng mục con: order, flex-grow, flex-shrink, flex-basis và align-self ở chế độ Flex, hoặc span cột/hàng và align-self ở chế độ Grid. Chế độ Grid còn cung cấp kích thước rãnh tùy chỉnh — gõ bất kỳ giá trị grid-template-columns/rows nào như 200px 1fr hoặc repeat(auto-fit, minmax(120px, 1fr)) — và một trình chỉnh sửa grid-template-areas trực quan nơi bạn đặt tên cho từng ô, việc này cũng tạo ra các đường lưới có tên. Bản xem trước trực tiếp gồm các ô được đánh số phản ánh mọi thay đổi, và bạn có thể xuất chỉ quy tắc .container hoặc vùng chứa cùng CSS theo mục.

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

1. Chọn Flex hoặc Grid bằng nút chuyển chế độ để quyết định xây dựng mô hình bố cục nào.
2. Đặt các thuộc tính vùng chứa — flex-direction/wrap và justify/align, hoặc số cột và hàng với justify-items/align-items.
3. Mở Cài đặt để thay đổi gap và số lượng mục, và để tạo kiểu cho từng mục con (order, flex-grow/shrink/basis, align-self, hoặc span cột/hàng).
4. Trong Grid, chuyển kích thước rãnh sang Tùy chỉnh để gõ grid-template-columns/rows của riêng bạn — px, fr, minmax() hoặc repeat(auto-fit/auto-fill, …).
5. Bật trình chỉnh sửa grid-template-areas và đặt tên cho từng ô để xếp các mục theo vùng.
6. Chọn xuất chỉ CSS vùng chứa hoặc vùng chứa cùng CSS theo mục, rồi sao chép kết quả.

Ví dụ

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

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

Sự khác biệt giữa Flexbox và Grid ở đây là gì?

Chế độ Flex sắp xếp các mục dọc theo một trục và cung cấp flex-direction, flex-wrap, justify-content và align-items. Chế độ Grid sắp xếp chúng theo hai chiều bằng grid-template-columns và grid-template-rows cùng justify-items và align-items. Chuyển chế độ bằng nút để so sánh cách mỗi mô hình xử lý cùng một kiểu căn chỉnh.

Làm sao để tạo kiểu cho từng mục riêng lẻ?

Mở Cài đặt và dùng điều khiển theo mục để đặt order, flex-grow, flex-shrink, flex-basis và align-self (Flex) hoặc span cột/hàng và align-self (Grid) cho từng mục con. Đặt Xuất thành 'Vùng chứa + mục' và công cụ sẽ thêm quy tắc .container > :nth-child(n) cho mỗi mục bạn tùy chỉnh.

Tôi có thể dùng kích thước rãnh tùy chỉnh như auto-fit hay minmax() không?

Có. Ở chế độ Grid, chuyển kích thước rãnh sang Tùy chỉnh và gõ bất kỳ giá trị grid-template-columns/rows hợp lệ nào — pixel, đơn vị fr, minmax() hoặc repeat(auto-fit/auto-fill, minmax(120px, 1fr)) cho các cột đáp ứng. Bản xem trước và CSS được tạo cập nhật khi bạn gõ.

Trình chỉnh sửa grid-template-areas làm gì?

Bật nó ở chế độ Grid và đặt tên cho từng ô của lưới; công cụ lắp ráp một khai báo grid-template-areas và các ô trống thành một dấu chấm. Đặt tên vùng cũng tạo ra các đường lưới có tên, và bạn có thể đặt một mục con vào một vùng bằng cách gõ tên của nó vào ô grid-area của mục đó.

Dữ liệu của tôi có được tải lên đâu đó không?

Không. Sân chơi chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript, nên các cài đặt của bạn và CSS được tạo không bao giờ được gửi đến máy chủ. Nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã được tải.