CSS Flexbox & Grid Cheat Sheet: 2 khái niệm dàn trang phổ biến

Trong giới Frontend, nếu JavaScript là linh hồn thì CSS Layout chính là bộ khung xương. Một Senior Dev thực thụ không bao giờ ngồi đoán xem margin-left: auto có chạy không, mà họ điều khiển giao diện bằng Flexbox và Grid.

Để giúp anh em tối ưu hóa thời gian “chạy deadline”, mình đã tổng hợp bộ CSS Flexbox cheat sheet và hướng dẫn CSS Grid siêu tốc dưới đây. Lưu lại ngay để không phải tra Google mỗi khi quên thuộc tính nhé!

MỤC LỤC

1. Flexbox Cheat Sheet: Giải pháp dàn trang 1 chiều

Flexbox (Flexible Box) sinh ra để giải quyết các bài toán dàn trang theo một chiều (hàng ngang hoặc cột dọc). Đây là “cứu cánh” cho các thanh Navigation, Sidebars hoặc các nhóm Button.

Các thuộc tính quan trọng cho Container (Cha)

Để bắt đầu, bạn luôn phải khai báo display: flex;.

flex-direction: Xác định hướng của các item (row, column).
justify-content: Căn chỉnh các item theo trục chính (ngang nếu là row).

flex-box-justify-content-flex-start — **justify-content: flex-start**

flexbox-justify-content-flex-end — **justify-content: flex-end**

flexbox-justify-content-space-between — **justify-content: space-between**

flexbox-justify-content-space-around — **justify-content: space-around**

flexbox-justify-content-center — **justify-content: center**

align-items: Căn chỉnh các item theo trục phụ (dọc nếu là row).

flexbox-align-items-center — **align-items: center**

flex-wrap: Cho phép các item rớt dòng khi hết không gian (wrap).

Code mẫu Flexbox: Căn giữa tuyệt đối & Menu Navigation

/* Căn giữa một phần tử hoàn hảo */
.center-container {
  display: flex;
  justify-content: center; /* Ngang */
  align-items: center;     /* Dọc */
  height: 100vh;
}

/* Navbar thực tế */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #2d3436;
}

/* Căn giữa một phần tử hoàn hảo */
.center-container {
  display: flex;
  justify-content: center; /* Ngang */
  align-items: center;     /* Dọc */
  height: 100vh;
}

/* Navbar thực tế */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #2d3436;
}

Thuộc tính cho Item (Con)

flex-grow: Khả năng giãn nở của item để lấp đầy khoảng trống.
flex-shrink: Khả năng co lại khi container quá hẹp.
flex-basis: Độ dài mặc định ban đầu của item.

2. Hướng dẫn CSS Grid: “Bí kíp” cấu trúc 2 chiều

Nếu Flexbox là “phù thủy 1 chiều” thì CSS Grid là “ông trùm 2 chiều”. Nó cho phép bạn kiểm soát cả hàng (row) và cột (column) cùng lúc. Đây là lựa chọn số 1 để xây dựng layout tổng thể cho toàn bộ website (Pillar pages).

Khởi tạo Grid Layout

display: grid;: Kích hoạt ma trận.
grid-template-columns: Định nghĩa số cột và độ rộng (dùng đơn vị fr – fraction là chuẩn bài nhất).
gap: Khoảng cách giữa các ô (thay thế cho margin cực kỳ sạch sẽ).

Code mẫu Grid

VD: Layout cho trang Tin tức & Gallery

/* Layout 3 cột bằng nhau, tự động xuống dòng */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Layout phức tạp: Header, Sidebar, Main, Footer */
.app-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Layout 3 cột bằng nhau, tự động xuống dòng */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Layout phức tạp: Header, Sidebar, Main, Footer */
.app-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Mẹo: Khi dùng hướng dẫn CSS Grid, hãy luôn sử dụng hàm repeat(auto-fit, minmax(200px, 1fr)) để làm Responsive mà không cần viết quá nhiều Media Queries.

3. So sánh: Khi nào dùng Flexbox, khi nào dùng Grid?

Đặc điểm	Flexbox	CSS Grid
Kích thước	1 Chiều (Hàng hoặc Cột).	2 Chiều (Hàng và Cột cùng lúc).
Ưu tiên	Nội dung (Content-first). Các item tự quyết định kích thước.	Bố cục (Layout-first). Container quyết định kích thước các ô.
Trường hợp dùng	Menu, Header, Footer đơn giản, căn giữa item.	Bố cục trang web, Dashboard phức tạp, Album ảnh.
Tính linh hoạt	Rất tốt cho việc căn chỉnh các item nhỏ lẻ.	Tuyệt vời để tạo các “vùng” layout cố định.

Lưu ý: Đừng cố dùng Grid cho mọi thứ và cũng đừng “ép” Flexbox làm những layout đa tầng phức tạp. Một dự án chuyên nghiệp thường là sự kết hợp cả hai: Dùng Grid để chia khung lớn và dùng Flexbox để sắp xếp các thành phần bên trong khung đó.

4. Những sai lầm “nghiệp dư” cần tránh

Dù có css flexbox cheat sheet trong tay, bạn vẫn dễ mắc lỗi nếu không để ý:

Quên vendor prefix: Dù năm 2026 hầu hết trình duyệt đã hỗ trợ tốt, nhưng nếu dự án yêu cầu hỗ trợ các trình duyệt cũ, hãy dùng Autoprefixer.
Lạm dụng Flex-direction: column: Đôi khi chỉ cần dùng Block element mặc định là đủ, không nhất thiết cái gì cũng phải Flex.
Grid gap quá đà: Hãy đảm bảo gap của bạn đồng bộ với hệ thống Design System (thường là bội số của 4 hoặc 8).

Làm chủ giao diện là bước đệm cực kỳ quan trọng trong lộ trình học Frontend ReactJS đi làm. Hy vọng bản CSS Flexbox & Grid Cheat Sheet này sẽ giúp anh em “clear” task nhanh hơn và có code đẹp hơn.

Hãy nhớ rằng: “Code chạy được là tốt, nhưng code dễ bảo trì và đúng chuẩn mới là đẳng cấp”.

Xem thêm bài viết:

>> Lộ trình học Frontend ReactJS đi làm: Từ HTML/CSS đến Interview năm 2026