CSS Flexbox vs Grid: Khi Nào Sử Dụng Cái Nào

Flexbox và CSS Grid là hai hệ thống bố cục mạnh mẽ nhất trong CSS hiện đại. Chúng đã thay thế float, inline-block và thậm chí cả bảng cho việc tạo bố cục. Nhưng sự khác biệt giữa chúng là gì và khi nào nên sử dụng cái nào? Hướng dẫn này so sánh Flexbox và Grid một cách chi tiết, với các ví dụ thực tế giúp bạn chọn công cụ phù hợp cho mọi thách thức bố cục.

Hiểu Về Flexbox

Flexbox (Flexible Box Layout) là hệ thống bố cục một chiều được thiết kế để phân phối không gian và căn chỉnh nội dung trong một container. Nó hoạt động dọc theo một trục duy nhất — hoặc là hàng hoặc cột — làm cho nó lý tưởng cho các thành phần và bố cục quy mô nhỏ nơi kích thước của các mục là không xác định hoặc động.

Flexbox hoạt động bằng cách biến một container thành flex container và các phần tử con trực tiếp của nó thành flex items. Container kiểm soát hướng dòng chảy của các mục (hàng hoặc cột), liệu chúng có xuống dòng hay không, và cách không gian thừa được phân phối. Mỗi mục có thể phát triển, co lại hoặc có kích thước cơ bản được chỉ định.

Mô Hình Bố Cục Một Chiều

• flex-direction: Thiết lập trục chính (row, row-reverse, column, column-reverse).
• justify-content: Căn chỉnh các mục dọc theo trục chính.
• align-items: Căn chỉnh các mục dọc theo trục chéo.
• flex-wrap: Kiểm soát việc xuống dòng của các mục.
• gap: Thiết lập khoảng cách giữa các mục.

Các Thuộc Tính Flexbox Cốt Lõi

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

CSS Grid là hệ thống bố cục hai chiều cho phép bạn kiểm soát đồng thời cả cột và hàng. Nó được thiết kế cho bố cục quy mô lớn, nơi bạn cần đặt các mục vào các vùng lưới cụ thể và duy trì căn chỉnh chính xác theo cả hai chiều.

Hiểu Về CSS Grid

CSS Grid giới thiệu hệ thống lưới đầy đủ với các dòng rõ ràng. Bạn định nghĩa các track cột và hàng, khoảng cách và vùng, sau đó đặt các mục vào các ô lưới cụ thể. Grid có thể xử lý cả bố cục cố định và linh hoạt, với các mục được đặt chính xác hoặc tự động.

Sự khác biệt cơ bản nằm ở chiều: Flexbox là một chiều (hàng hoặc cột), Grid là hai chiều (hàng và cột). Sự khác biệt này quyết định khi nào mỗi cái tỏa sáng. Flexbox xuất sắc trong việc phân phối không gian và căn chỉnh trong một chiều duy nhất. Grid xuất sắc trong việc tạo bố cục hai chiều với kiểm soát chính xác vị trí.

Flexbox hoạt động như thế nào?

• grid-template-columns / grid-template-rows: Định nghĩa kích thước track cột và hàng.
• grid-template-areas: Đặt tên các vùng lưới để bố cục trực quan.
• gap: Thiết lập khoảng cách giữa các track.
• place-items: Căn chỉnh các mục trong vùng lưới của chúng.
• Grid areas: Named regions of the grid that items can be assigned to.
• Gap: The spacing between grid tracks (rows and columns).

Mô Hình Bố Cục Hai Chiều

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

Một số mẫu bố cục phổ biến và cách tiếp cận được khuyến nghị cho mỗi mẫu:

So Sánh Trực Tiếp

Các Mẫu Bố Cục Phổ Biến

Flexbox và Grid không phải là đối thủ cạnh tranh — chúng là công cụ bổ sung. Các bố cục phức tạp nhất sử dụng cả hai: Grid cho cấu trúc trang tổng thể và Flexbox cho căn chỉnh thành phần trong các vùng lưới.

Các Thuộc Tính Grid Cốt Lõi

Grid items cũng có thể là flex containers. Mẫu này cực kỳ mạnh mẽ: sử dụng Grid để tạo cấu trúc trang tổng thể, sau đó áp dụng Flexbox cho từng vùng lưới để xử lý bố cục nội dung bên trong.

CSS Grid hoạt động như thế nào?

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Flex items cũng có thể là grid containers. Mẫu này ít phổ biến hơn nhưng hữu ích khi bạn cần bố cục lưới trong một thành phần là một phần của luồng flex.

Khác Biệt Chính

Flexbox có hỗ trợ trình duyệt tốt hơn (IE10+ với tiền tố), trong khi Grid có hỗ trợ hiện đại hơn (IE11 với tiền tố -ms-, Edge 16+, tất cả trình duyệt hiện đại). Đối với các dự án cần hỗ trợ IE, hãy thiết kế với Grid và cung cấp fallback Flexbox bằng cách sử dụng @supports.

.card {
  display: flex;
  flex-direction: column;
}

.card__content {
  flex: 1;
}

Sử dụng Flexbox cho thành phần một chiều (thanh điều hướng, danh sách thẻ, căn chỉnh form) và Grid cho bố cục trang hai chiều (bố cục tổng thể, dashboard, thư viện ảnh). Nếu bạn thấy mình đang sử dụng flex-wrap để mô phỏng lưới, hãy chuyển sang Grid. Nếu bạn chỉ cần căn chỉnh các mục dọc theo một trục duy nhất, Flexbox đơn giản hơn.

Bảng So Sánh

Có, và chúng hoạt động tuyệt vời cùng nhau. Sử dụng Grid cho cấu trúc trang tổng thể và Flexbox cho các thành phần bên trong vùng lưới. Grid items có thể là flex containers và flex items có thể là grid containers. Sự kết hợp này cho phép bạn tận dụng điểm mạnh của cả hai hệ thống.

Thanh Điều Hướng

Không. Grid bổ sung cho Flexbox, không thay thế nó. Mỗi cái giải quyết các vấn đề khác nhau. Flexbox xuất sắc trong phân phối không gian một chiều và căn chỉnh nội dung. Grid xuất sắc trong bố cục hai chiều. Hầu hết các trang web chuyên nghiệp sử dụng cả hai.

Sử Dụng Flexbox và Grid Cùng Nhau

Flexbox là một chiều (hàng hoặc cột), Grid là hai chiều (hàng và cột). Flexbox hoạt động từ nội dung ra ngoài (các mục quyết định bố cục), Grid hoạt động từ bố cục vào trong (lưới quyết định vị trí). Flexbox tốt hơn cho thành phần, Grid tốt hơn cho bố cục trang.

Bố Cục Thẻ

Page-level layouts with headers, sidebars, content areas, and footers are the quintessential Grid use case. Named grid areas make the layout readable and maintainable:

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

Notice how the responsive breakpoint simply redefines the grid template. The items stay assigned to their grid areas, and the layout restructures automatically. This is far cleaner than rearranging Flexbox containers at different breakpoints.

Căn Giữa Phần Tử

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

auto-fillminmax pattern is one of the most powerful Grid techniques.

Bố Cục Holy Grail

Dashboards with widgets of different sizes spanning multiple rows and columns are ideal for Grid. You can place items at specific grid positions and span them across tracks:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

Bố Cục Trang Tổng Thể

When content needs to overlap or be placed in non-sequential positions, Grid is the only CSS layout system that supports this natively. You can place items at specific grid lines, creating overlapping compositions without absolute positioning.

Form Layout

The famous "Holy Grail" layout (header, three-column body with fixed-width sidebars and flexible center, footer) is trivial with Grid:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Xử Lý Trình Duyệt Cũ

The most effective approach is not choosing between Flexbox and Grid but combining them strategically. A common and recommended pattern is using Grid for the macro layout (page structure) and Flexbox for the micro layout (component internals).

Flexbox trong Grid Items

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

In this example, Grid defines the overall page structure while Flexbox handles the alignment within each section. This separation of concerns keeps your CSS organized and purposeful.

Câu Hỏi Thường Gặp

Grid trong Flex Items

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex-shrink: 0;
}

Flexbox wrapping is ideal for tag lists, chip groups, and any collection of items that should flow naturally to the next line when they run out of horizontal space. Each item maintains its natural size.

Fallback Cho Trình Duyệt Cũ

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

Grid auto-fill creates a truly responsive grid without any media queries. The number of columns adjusts automatically based on the container width, with each column being at least 300px. This is more powerful than Flexbox wrapping because the items stretch to fill the row evenly.

Tôi nên sử dụng Flexbox hay Grid?

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Common Mistakes to Avoid

• Using Grid for single-row layouts:display: gridgrid-template-columns row is usually over-engineering.
• Using Flexbox for two-dimensional layouts: Trying to create a grid layout with nested flex containers leads to fragile, hard-to-maintain code. Use Grid for any layout where you need to control both rows and columns.
• Forgetting about gap:gap property. Use it instead of margins for spacing between items. It only applies between items, not at the edges, which is usually what you want.
• Overriding flex-basis with width:flex-basiswidthflex shorthand to avoid confusion.
• Not using minmax:minmax()1frminmax(200px, 1fr) ensures a minimum width.
• Ignoring implicit grids:grid-auto-rowsgrid-auto-columns to control the size of these implicit tracks.

Browser Support

Both Flexbox and Grid enjoy excellent browser support in 2026:

gap property in Flexbox, which was the last major feature to gain universal support, has been available in all browsers since 2021.

Quick Decision Guide

When you start a new layout, ask yourself these questions:

• Do I need to control rows and columns at the same time? Yes → Grid. No → Flexbox.
• Should the content dictate the layout size, or should the layout dictate where content goes? Content-driven → Flexbox. Layout-driven → Grid.
• Do items need to wrap to new lines naturally?flex-wrapauto-fill.
• Do I need items to overlap? Yes → Grid.
• Is this a component inside a larger layout? Probably Flexbox for the component, Grid for the larger layout.