Học CSS qua trò chơi: Flexbox Froggy và Grid Garden

Bắt đầu với Flexbox Froggy để luyện tập căn chỉnh dọc theo một trục, sau đó sử dụng Grid Garden để luyện tập đặt một mục giữa các đường lưới. Sau mỗi bài tập trò chơi, hãy tái hiện ý tưởng đó trên một trang nhỏ của riêng bạn. Một kết quả hữu ích là khả năng giải thích tại sao một khai báo hoạt động khi bố cục thay đổi, thay vì chỉ nhớ câu trả lời của một cấp độ cụ thể.

Cách học CSS bằng trò chơi, sau đó áp dụng nó

Lộ trình này kết hợp hai trò chơi với ba bài tập gốc. Nó phù hợp với người có thể đọc một quy tắc CSS đơn giản và muốn có phản hồi trực quan. Đây không phải là một khóa học phát triển web hoàn chỉnh: giao diện thực tế cũng cần nội dung dễ đọc, hành vi phản hồi, truy cập bằng bàn phím và kiểm thử với các lượng văn bản khác nhau.

Chọn bài tập phù hợp với câu hỏi của bạn

Các trò chơi được cung cấp bởi Codepip. Cozcade liên kết mỗi trò chơi được lưu trữ với hướng dẫn tương ứng của nó: Flexbox Froggy và hướng dẫn của nó; Grid Garden và hướng dẫn của nó. Các trang Froggy và Grid Garden gốc cung cấp các phiên bản riêng của tác giả. Hãy sử dụng bàn phím khi làm theo các bài tập mã ở đây.

Trước tiên, hãy đặt tên cho trục trước khi chọn thuộc tính.

Flexbox có một trục chính và một trục phụ. flex-direction thiết lập hướng chính; justify-content định vị các mục dọc theo trục chính đó, trong khi align-items liên quan đến trục phụ. Trong một hàng bình thường từ trái sang phải, trục chính là nằm ngang. Thay đổi hướng thành cột và nó sẽ trở thành trục dọc. Các định nghĩa này được đề cập trong phần giới thiệu Flexbox của MDN.

Trước khi thử khai báo trong Froggy, hãy cho biết bạn muốn các mục di chuyển theo hướng nào. Sau đó, đặt tên cho hướng đó liên quan đến trục chính hiện tại. Điều này biến một câu trả lời sai thành một câu hỏi cụ thể: bạn đã chọn sai thuộc tính, sai giá trị hay sai trục?

Bài tập 1: Di chuyển một nhóm đến cuối

Tạo ba vật nhỏ bên trong một thùng chứa. Đây là bài tập gốc, không phải là cấp độ trò chơi hoặc đáp án được sao chép.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Mục tiêu của bạn là di chuyển ba vật cùng nhau về phía cạnh phải mà không thay đổi thứ tự của chúng hoặc tạo khoảng cách riêng cho mỗi vật. Dự đoán kết quả, sau đó thêm justify-content: flex-end vào thùng chứa.

Bây giờ hãy so sánh nó với justify-content: space-between. Lựa chọn đầu tiên di chuyển nhóm; lựa chọn thứ hai phân bổ không gian có sẵn giữa các vật. Hãy thử với thùng chứa hẹp và rộng. Giải thích bạn sẽ chọn phiên bản nào cho ba nút cần nằm gần nhau. Kết quả hiển thị quan trọng hơn việc ghi nhớ một giá trị.

Bài tập 2: Giữ nguyên hướng dẫn, thay đổi trục

Sử dụng lại vùng chứa đó, thêm flex-direction: column, đặt height: 12rem và giữ nguyên justify-content: flex-end. Các mục giờ đây tập trung về phía dưới. Khai báo của bạn không trở thành lệnh “di chuyển sang phải”: nó vẫn hoạt động dọc theo trục chính mà bạn đã thay đổi.

Tiếp theo, thêm align-items: flex-start. So sánh cách sắp xếp trước và sau khi thêm. Với hướng từ trái sang phải được chỉ định, các mục được căn chỉnh về phía bên trái trên trục chéo. Xóa khai báo và quan sát lại hành vi kéo giãn mặc định.

Viết một lời giải thích ngắn gọn về cả hai thay đổi mà không sử dụng cụm từ “nó hoạt động”. Ví dụ, xác định trục, không gian trống và nhóm đang được định vị. Nếu bạn không thể giải thích kết quả, hãy thu nhỏ ví dụ xuống còn hai mục và chỉ thay đổi một khai báo tại một thời điểm. Đây là thói quen cần áp dụng trở lại vào trò chơi.

Tiếp theo, phân biệt một đường lưới với ranh giới của nó.

Việc đặt ô trên lưới sử dụng các đường bao quanh hàng và cột. Năm cột rõ ràng có sáu đường ranh giới. Một ô được đặt từ dòng cột 3 đến dòng 5 trải rộng trên hai cột, chứ không phải ba. Xem Giới thiệu về lưới của MDN để phân biệt giữa các đường, ô và dòng.

Trong Grid Garden, hãy đọc ranh giới bắt đầu và kết thúc trước khi thử một vị trí. Trên trang của riêng bạn, hãy vẽ hoặc ghi nhãn các ranh giới nếu việc đếm khoảng cách gây nhầm lẫn.

Bài tập 3: Đặt một thẻ giữa hai dòng

Xây dựng một bảng năm cột và đặt một thẻ vào đó:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Dự đoán vị trí thẻ sẽ xuất hiện trước khi mở trang. Sau đó, làm cho thẻ trải rộng toàn bộ bảng bằng cách chỉ thay đổi vị trí cột của nó. Với năm cột rõ ràng ở trên, grid-column: 1 / 6 trải dài từ ranh giới đầu tiên đến ranh giới cuối cùng.

Cuối cùng, thay đổi văn bản thành một câu dài hơn nhiều và thu hẹp trình duyệt. Quy tắc đặt vị trí vẫn có thể đúng trong khi cách trình bày chiều cao cố định của thẻ trở nên không phù hợp với nội dung của nó. Giải một bài tập trò chơi dạy một phần của bố cục; xây dựng một trang có thể sử dụng được đòi hỏi phải kiểm tra cả nội dung.

Sử dụng tiến trình trò chơi như phản hồi, không phải là bằng chứng về sự thành thạo

Sau khi hoàn thành bài tập thành công, hãy thay đổi một giả định: hướng, số lượng mục, chiều rộng khả dụng hoặc độ dài văn bản. Dự đoán kết quả trước khi xem. Nếu bạn có thể điều chỉnh ý tưởng và giải thích sự thay đổi, bạn đã học được nhiều hơn là chỉ trả lời đúng một câu hỏi.

Khi quay lại trò chơi, hãy kiểm tra xem bạn có đang mở cùng một phiên bản và môi trường trình duyệt hay không. Mục yêu thích tài khoản Cozcade xác định các trò chơi bạn muốn chơi lại; chúng không đảm bảo rằng tiến trình bài học nội bộ của trò chơi sẽ được chuyển giữa các thiết bị. Tránh xóa dữ liệu trang web đã lưu trữ trong khi kiểm tra tiến độ và chỉ sử dụng tính năng xuất rõ ràng nếu trò chơi cụ thể đó cung cấp tính năng này.

Tiếp tục với hướng dẫn ghép nối

Sử dụng hướng dẫn Froggy để luyện tập trục và căn chỉnh và hướng dẫn Grid Garden cho các câu hỏi về vị trí. Nếu bạn muốn luyện tập loại khác sau đó, hãy duyệt qua trò chơi học tập.

Các bài tập trên được viết cho bài viết này. Các trang tham khảo đã được kiểm tra vào ngày 11 tháng 10 năm 2026. Các bài kiểm tra trò chơi được ghi lại của chúng tôi bao gồm một số tương tác trên máy tính để bàn, chứ không phải hoàn thành tất cả các cấp độ hoặc một khóa học đầy đủ trên thiết bị di động. Bài viết này hướng dẫn một chuỗi thực hành; nó không cấp chứng chỉ hoặc thay thế việc kiểm tra giao diện của riêng bạn.

Các trò chơi bạn có thể chơi trên Cozcade

Flexbox FroggyGrid Garden