---
title: "CSS cơ bản: Sự khác nhau giữa Flexbox và Grid"
description: "Flexbox là cách sắp xếp các phần tử theo bố cục một chiều (ngang hoặc dọc). Grid là cách thức để xây dựng hệ thống layout theo hai chiều ngang và dọc."
canonical: "https://200lab.io/blog/flexbox-vs-grid"
published: "2023-09-15T04:09:47Z"
updated: "2026-08-21T07:17:36Z"
authors: ["Lam Vu Hoang"]
tags: ["Frontend"]
reading_minutes: 23
access: "public"
---

Nếu bạn đã từng sử dụng những thuộc tính như `float` hay `position` để sắp xếp bố cục các thành phần trên trang web, bạn sẽ thấy chúng có khá nhiều hạn chế. Ví dụ như thuộc tính `float` có thể gây ra nhiều vấn đề về bố cục nếu không xác định rõ được kích thước của các phần tử.

Việc sử dụng các thuộc tính trên sẽ khiến chúng ta phải viết rất nhiều code CSS mà tính linh hoạt của bố cục lại không cao. Chính vì thế mà flexbox và grid ra đời, nhằm đem đến cách sắp xếp bố cục linh hoạt và hiệu quả hơn trên nhiều kích thước màn hình khác nhau.

Để có thể hiểu Flexbox và Grid là gì, bạn cần nắm được khái niệm HTML, CSS cơ bản. 200Lab đã có bài viết nói về [HTML và CSS là gì](</blog/css-la-gi>), nếu chưa biết thì bạn nên tìm hiểu trước nhé.

[CSS LÀ GÌ? CSS VÀ HTML CÓ GÌ KHÁC NHAU](https://200lab.io/blog/css-la-gi) — CSS viết tắt Cascading Style Sheets là ngôn ngữ định dạng được sử dụng để điều khiển và định dạng kiểu cho các ngôn ngữ đánh dấu siêu văn bản

[Xem Khoá Học Của 200Lab](<https://200lab.io/khoa-hoc?utm_campaign=ao_productpush&utm_medium=content&utm_source=blog>)

## **1. Flexbox là gì?**

### **1.1. Giới thiệu Flexbox**

#### **1.1.1. Khái niệm Flexbox**

Flexbox là cách sắp xếp các phần tử theo bố cục một chiều (ngang hoặc dọc), kích thước của các phần tử, vị trí và khoảng cách giữa chúng sẽ tự động được điều chỉnh sao cho phù hợp với bố cục.

#### **1.1.2. Tại sao cần sử dụng Flexbox?**

Trước đây, việc sử dụng thuộc tính `float` và `position` để sắp xếp bố cục trang web là phổ biến vì chúng có thể hoạt động tốt ở vài trường hợp, tuy nhiên chúng có những giới hạn gây khó chịu như sau:

- Căn giữa theo chiều dọc một khối nội dung trong phần tử cha.
- Làm cho tất cả các phần tử con trong một container chiếm một phần bằng nhau của chiều rộng/chiều cao có sẵn, bất kể chiều rộng/chiều cao có sẵn là bao nhiêu.
- Làm cho tất cả các cột trong một bố cục nhiều cột có cùng chiều cao, ngay cả khi chúng chứa một lượng nội dung khác nhau.

Để giải quyết các vấn đề trên, người ta đã nghĩ ra giải pháp là Flexbox. Nó cho phép bạn dễ dàng căn giữa nội dung theo chiều dọc, phân phối không gian theo cách linh hoạt và tự động điều chỉnh chiều cao của các phần tử trong cùng một hàng.

#### **1.1.3. The Flex model**

![The flex model. Nguồn: MDN](https://assets.200lab.io/images/2024/12/05/image-58-ee9ba6a1bf3e814273d7.webp)

- Khi một phần tử được định nghĩa thuộc tính `display: flex`, bản thân nó sẽ trở thành một **Flex Container**
- Bên trong Flex Container sẽ chứa các **Flex Items**, tượng trưng cho các phần tử mà chúng ta muốn sắp xếp vị trí của chúng
- Trục chính là trục cùng chiều với các Flex Item được gọi là **Main Axis**. Nếu các Flex Items nằm ngang thì chiều ngang chính là Main Axis và ngược lại. Điểm đầu và điểm cuối của một Main Axis lần lượt là **main start** và **main end**
- Trục phụ là trục ngược chiều với các Flex Items được gọi là Cross Axis. Nếu các Flex Items nằm ngang thì chiều dọc chính là Cross Axis và ngược lại. Điểm đầu và điểm cuối của Cross Axis lần lượt là **cross start** và **cross end.**

### **1.2. Flex Container và Flex Item**

Flex Container là phần tử bao ngoài các Flex Item. Để tạo 1 Flex Container, chúng ta set cho phần tử bao ngoài thuộc tính `display: flex;` hoặc `display: inline-flex;`. Vậy sự khác nhau giữa `display: flex;` và `display: inline-flex;` là gì?

#### **1.2.1. Tìm hiểu về `display: flex`**

- Phần tử sẽ hiển thị như một khối (block-level element) và sẽ chiếm toàn bộ chiều rộng của container cha.
- Các phần tử con sẽ xếp cạnh nhau theo chiều rộng và mặc định là các phần tử con sẽ có chiều rộng bằng nhau, chia đều không gian.

Ví dụ:

![](https://assets.200lab.io/images/2024/12/05/image-3-d5b62acffc46f2eb8c62.webp)

#### **1.2.2. Tìm hiểu về `display: inline-flex`**

- Phần tử sẽ hiển thị như một phần tử trên dòng (inline-level element) và chỉ chiếm chiều ngang cần thiết để chứa nội dung của nó.
- Các phần tử con sẽ vẫn xếp cạnh nhau theo chiều ngang, nhưng chúng sẽ không chia đều không gian và sẽ co lại để vừa với nội dung của chúng.

Ví dụ:

![](https://assets.200lab.io/images/2024/12/05/image-4-6fdd5738bf7026c39c08.webp)

### **1.3. Flex Direction, Main Axis và Cross Axis**

#### **1.3.1. Flex Direction**

Thuộc tính `flex-direction` xác định hướng của các Flex Item được sắp xếp bên trong Flex Container. Có 4 giá trị của `flex-direction` được định nghĩa:

- row (mặc định): Các flex item được sắp xếp theo chiều ngang từ trái sang phải
- row-reverse: Các flex item được sắp xếp theo chiều ngang từ phải sang trái
- column: Các flex item được sắp xếp theo chiều dọc từ trên xuống dưới
- column-reverse: Các flex item được sắp xếp theo chiều dọc từ dưới lên trên

![flex-direction cheatsheet (Nguồn: trustbit)](https://assets.200lab.io/images/2024/12/05/image-16-c7158d5fa60632725713.png)

#### **1.3.2. Main Axis**

Main Axis (trục chính) là trục theo hướng được xác định bởi thuộc tính `flex-direction`. Nó là trục theo chiều dọc hoặc chiều ngang do chúng ta định nghĩa giá trị cho thuộc tính `flex-direction`.

- Nếu `flex-direction` là `row` hoặc `row-reverse`, thì main axis là trục ngang từ trái sang phải.
- Nếu `flex-direction` là `column` hoặc `column-reverse`, thì main axis là trục dọc từ trên xuống dưới.

#### **1.3.3. Cross Axis**

Cross Axis (trục phụ) là trục vuông góc với Main Axis.

- Nếu `flex-direction` là `row` hoặc `row-reverse`, thì cross axis là trục dọc từ trên xuống dưới.
- Nếu `flex-direction` là `column` hoặc `column-reverse`, thì cross axis là trục ngang từ trái sang phải.

Hiểu được các khái niệm về Flex Direction, Main Axis hay Cross Axis sẽ giúp chúng ta phối hợp sử dụng các khái niệm trong Flexbox dễ dàng và hiệu quả hơn.

### **1.4. Flex Basis**

Flex Basis dùng để xác định kích thước ban đầu của một phần tử Flex Item.

Khi bạn set giá trị cố định cho `flex-basis` bằng px hoặc phần trăm (%), bạn đang thiết lập kích thước ban đầu cố định cho Flex Item trên Main Axis. Cùng quan sát ví dụ sau:

![](https://assets.200lab.io/images/2024/12/05/image-17-b21f50f3634ff9d6b845.webp)

Khi chúng ta set `flex-basis: 90px` cho class `box2`, phần chiều rộng còn lại sẽ dành cho `box1` và `box3`. Do cả `box1` và `box3` đều set `flex-basis` là 100% nên chúng có chiều rộng bằng nhau.

Cùng quan sát thêm ví dụ nữa nhé:

![](https://assets.200lab.io/images/2024/12/05/image-19-0d948fe991b25b7452ef.webp)

Qua 2 ví dụ trên các bạn thấy được gì? `flex-basis` chỉ phát huy tác dụng khi bạn sử dụng với nhiều Flex Item trong một Flex Container, nó giúp các Flex Item có thể tự điều chỉnh kích thước sao cho đúng với tỉ lệ mà chúng ta đặt cho nó, và những phần tử nào được set chiều rộng cố định, `flex-basis` sẽ tính toán chiều rộng cho những phần tử còn lại nằm trong Flex Container đó.

### **Flex Basis bị ảnh hưởng như thế nào bởi flex-direction?**

Giá trị của `flex-basis` sẽ đè lên thuộc tính `width` hoặc `height` của phần tử phụ thuộc vào giá trị của `flex-direction`. Để hiểu rõ hơn bạn hãy xem ví dụ sau nhé:

  See the Pen [CSS Flexbox basis](<https://codepen.io/lamhoangvu/pen/BavWoJv>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

Các bạn có thể thấy khi `flex-direction: row`, `flex-basis` sẽ ghi đè lên `width` của phần tử và tác động theo chiều ngang. Còn khi `flex-direction: column`, `flex-basis` sẽ tác động lên `width` của phần tử theo chiều dọc.

### **1.5. Flex Grow**

Thuộc tính `flex-grow` dùng để quy định tỷ lệ phát triển của các phần tử con so với nhau khi có không gian dư thừa. Ví dụ nếu tất cả phần tử đều có giá trị `flex-grow` bằng nhau, chiều rộng của chúng cũng sẽ bằng nhau vì được chia đều.

  See the Pen [CSS Flex grow](<https://codepen.io/lamhoangvu/pen/ZEVebjW>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

Nếu như không sử dụng thuộc tính `flex-grow` , chiều rộng của các phần tử sẽ bằng với giá trị của thuộc tính `width` mà chúng ta đã set. Khi sử dụng `flex-grow`, chiều rộng các phần tử sẽ được thay đổi sao cho chiếm tối đa chiều rộng của div bao ngoài sau khi đã trừ đi khoảng margin, chiều rộng mới này ghi đè lên thuộc tính `width` của từng phần tử, dẫn đến kết quả bên trên.

Nếu có một phần tử có giá trị `flex-grow` cao hơn các phần tử còn lại, chiều rộng của chúng cũng sẽ lớn hơn các phần tử khác.

  See the Pen [Flex grow 2](<https://codepen.io/lamhoangvu/pen/OJrpyod>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

Chiều rộng của phần tử khi sử dụng `flex-grow` được tính toán như sau:

Giả sử ban đầu chúng ta có 5 phần tử, ta set `flex-grow` cho 5 phần tử đều bằng 1, vậy lúc này chiều rộng mỗi phần tử sẽ bằng **1/ (tổng chiều rộng)** là bằng **1/5** đúng không?

Nhưng nếu chúng ta tăng `flex-grow` của ô số 3 lên `flex-grow: 3`, tổng chiều rộng lúc này sẽ bằng **1 + 1 + 3 + 1 + 1 = 7. **Vậy là ô số 3 lúc này chiếm **3/7** của container, các ô còn lại chiếm **1/7**

### **1.6. Flex Shrink**

Thuộc tính `flex-shrink` thì ngược lại so với `flex-grow`, nó không làm phần tử dãn ra mà co lại khi chúng ta thay đổi độ rộng của container giảm xuống.

  See the Pen [CSS Flexbox shrink](<https://codepen.io/lamhoangvu/pen/oNJZjJE>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

### **1.7. Justify Content**

Thuộc tính `justify-content` dùng để chỉ định khoảng cách hoặc không gian giữa các phần tử theo Main Axis. Các giá trị của `justify-content` bao gồm:

- `flex-start` (mặc định): Các phần tử con được căn chỉnh về phía đầu (bên trái nếu `flex-direction` là `row` hoặc bên trên nếu `flex-direction` là `column`) của container.
- `flex-end`: Các phần tử con được căn chỉnh về phía cuối (bên phải nếu `flex-direction` là `row` hoặc bên dưới nếu `flex-direction` là `column`) của container.
- `center`: Các phần tử con được căn giữa theo trục chính của container.
- `space-between`: Các phần tử con được căn đều và cách nhau đều nhau, không có khoảng trống ở đầu và cuối của container.
- `space-around`: Các phần tử con được căn đều và có khoảng trống đều nhau ở cả hai bên và giữa chúng.
- `space-evenly`: Các phần tử con được căn đều và có khoảng trống đều nhau, bao gồm cả phần tử ở đầu và cuối container.

![justify-content cheatsheet (Nguồn: trustbit)](https://assets.200lab.io/images/2024/12/05/image-41-197e3a83c7dc57aa4643.png)

Các bạn có thể chỉnh sửa đoạn code sau để hiểu rõ hơn về Justify Content:

  See the Pen [CSS Flexbox Justify Content](<https://codepen.io/lamhoangvu/pen/WNLprvv>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

### **1.8. Align Items **

Thuộc tính `align-items` dùng để chỉ định cách phần tử con căn chỉnh theo Cross Axis bên trong container.

Các giá trị của `align-items` bao gồm:

- `flex-start` (mặc định): Các phần tử con được căn chỉnh về phía đầu (bên trên nếu `flex-direction` là `row`, bên trái nếu `flex-direction` là `column`) của container linh hoạt theo Cross Axis.
- `flex-end`: Các phần tử con được căn chỉnh về phía cuối (bên dưới nếu `flex-direction` là `row`, bên phải nếu `flex-direction` là `column`) của container linh hoạt theo Cross Axis.
- `center`: Các phần tử con được căn giữa theo Cross Axis của container.
- `baseline`: Các phần tử con được căn chỉnh sao cho dòng chữ cơ bản (baseline) của chúng trùng với dòng chữ cơ bản của container.
- `stretch`: Các phần tử con sẽ căn chỉnh sao cho chúng kéo dãn để đạt đến kích thước tối đa theo Cross Axis, điều này thường sử dụng khi bạn muốn các phần tử con động theo chiều cao hoặc chiều rộng của container.

![align-items cheatsheet (Nguồn: trustbit)](https://assets.200lab.io/images/2024/12/05/image-43-c3eb8b55f93abbd5b8c2.png)

Các bạn có thể chỉnh sửa đoạn code sau để hiểu rõ hơn về Align Items:

  See the Pen [Untitled](<https://codepen.io/lamhoangvu/pen/ExGWPPb>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

### **1.9. Align Self **

Thuộc tính `align-self` khá giống với `align-items`, cũng là dùng để chỉ định cách phần tử con căn chỉnh theo Cross Axis bên trong container. Tuy nhiên khác với `align-items` là áp dụng với tất cả phần tử con nằm trong container, `align-self` chỉ áp dụng với phần tử đơn lẻ trong container.

Các giá trị của `align-self` bao gồm:

- `flex-start`: Phần tử con được căn chỉnh về phía đầu của container theo Cross Axis.
- `flex-end`: Phần tử con được căn chỉnh về phía cuối của container theo Cross Axis.
- `center`: Phần tử con được căn giữa theo Cross Axis.
- `baseline`: Phần tử con được căn chỉnh sao cho dòng chữ cơ bản (baseline) của nó trùng với baseline của container.
- `stretch` (mặc định): Phần tử con sẽ căn chỉnh sao cho nó kéo dãn để đạt đến kích thước tối đa theo Cross Axis.

  See the Pen [CSS Align Self](<https://codepen.io/lamhoangvu/pen/KKbWegZ>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

### **1.10. Khi nào nên sử dụng_ _Flexbox?**

#### **1.10.1 Sắp xếp các phần tử theo hàng hoặc cột**

Flexbox rất mạnh mẽ khi bạn muốn sắp xếp hoặc căn chỉnh các phần tử con bên trong một container chính theo Main Axis. Điều này thường gặp ở các thành phần trong trang web phổ biến như: menu dọc, thanh điều hướng,...

![App layouts phổ biến (Nguồn: trustbit)](https://assets.200lab.io/images/2024/12/05/image-47-f7e4c2e959e31b2f3961.webp)

#### **1.10.2. Tương thích với nhiều kích thước màn hình**

Flexbox rất thích hợp cho việc xử lý giao diện Responsive, trong thực tế có rất nhiều thành phần trong website sử dụng flexbox để đáp ứng giao diện Responsive:

- **Navigation Bar**

  See the Pen [Untitled](<https://codepen.io/lamhoangvu/pen/xxmqzmx>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

Như ở ví dụ bên trên, khi được xem ở màn hình desktop, các menu item trong thanh navbar sẽ nằm ngang trong container. Nhưng khi được xem ở màn hình nhỏ hơn `768px`, các menu item sẽ nằm dọc.

- **Item layouts**

  See the Pen [CSS Flexbox: Item layouts](<https://codepen.io/lamhoangvu/pen/abPJKgz>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

Trong ví dụ này, các phần tử con sẽ thay đổi từ việc hiển thị 3 cột trên màn hình lớn thành hiển thị 2 cột khi màn hình thu nhỏ xuống dưới `768px`.

## **2. Grid là gì?**

### **2.1. Giới thiệu Grid**

#### **2.1.1. Khái niệm Grid**

Grid là cách thức để xây dựng hệ thống layout theo hai chiều ngang và dọc. Ý tưởng chính của Grid là chia webpage thành nhiều cột và hàng, từ đó có thể tuỳ chỉnh vị trí và kích thước của phần tử bất kì nằm bên trong webpage theo ý muốn.

#### **2.1.2. Tại sao chúng ta cần sử dụng Grid?**

Trong khi Flexbox chỉ sắp xếp được bố cục theo một chiều ở một thời điểm (ngang hoặc dọc), thì grid có thể sắp xếp được bố cục theo cả hai chiều. Grid sinh ra nhằm xử lý nhiều giao diện phức tạp hơn và đi sâu vào tuỳ chỉnh từng vùng của giao diện.

#### **2.1.3. Các thuật ngữ hay dùng trong Grid**

- **Grid Container**

Khi một phần tử được khai báo thuộc tính `display: grid` hoặc `display: inline-grid`, phần tử đó sẽ trở thành một Grid Container.

![Grid container](https://assets.200lab.io/images/2024/12/05/grid-container-f4c7f6bc4869065c5475.webp)

Đoạn code sau mô tả cách khai báo một Grid Container cơ bản:

  See the Pen [Grid Container](<https://codepen.io/lamhoangvu/pen/qBLmZaw>) by Lâm Hoàng Vũ ([@lamhoangvu](<https://codepen.io/lamhoangvu>))
  on [CodePen](<https://codepen.io>).

Nằm trong Grid Container là các Grid Items.

- **Grid Tracks**

Mỗi một hàng hay mỗi một cột bên trong Grid Container được gọi là một Grid Tracks, Grid Tracks có thể được điều chỉnh thông qua thuộc tính `grid-template-columns` hay `grid-template-rows` mà chúng ta sẽ cùng nhau tìm hiểu ở mục bên dưới.

![Grid Tracks](https://assets.200lab.io/images/2024/12/05/grid-tracks-51ec9f075f6ba756a811.webp)

- **Grid Lines**

Hai bên lề trái và phải, trên và dưới của một Grid Tracks được gọi là Grid Lines. Grid Lines sẽ được tính bắt đầu từ 1 cho đến n.

![Grid Lines](https://assets.200lab.io/images/2024/12/05/grid-lines-3942e7289ddf0e5ce796.webp)

- **Grid Cell**

Các Grid Lines giao nhau tạo thành các ô hay còn gọi là Grid Cell. Đây là đơn vị nhỏ nhất nằm trong Grid.

![Grid Cell](https://assets.200lab.io/images/2024/12/05/grid-cell-60414e57082bd71a400b.webp)

- **Grid Area**

Là một vùng hình chữ vuông hoặc hình chữ nhật được ghép bởi nhiều Grid Cell. Grid Area được khai báo dựa trên thuộc tính `grid-template-areas`

![Grid Area](https://assets.200lab.io/images/2024/12/05/grid-area-d38d229eb23213417f91.webp)

### **2.2. Grid Template Columns và Grid Template Rows**

Thuộc tính `grid-template-columns` và `grid-template-rows` dùng để khai báo kích thước của các Grid Item và số lượng cột hay số lượng hàng mà Grid Item chiếm.

Ví dụ với đoạn code sau:

```
.container {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-template-rows: 100px 200px;
}

```

Đoạn code được hiểu như sau: Tạo ra một Grid Container có 3 cột và 2 hàng, cột thứ nhất và cột thứ 3 sẽ chiếm 200px, cột thứ 2 chiếm 100px. Tương tự với hàng thứ nhất chiếm 100px và hàng thứ 2 chiếm 200px.

![](https://assets.200lab.io/images/2024/12/05/grid-template-row-and-columns-1-01196894eabe6f4b4228.webp)

Ngoài sử dụng `px` thì Grid còn cung cấp thêm cho chúng ta thêm một đơn vị là `fr`

`fr` là viết tắt của từ **fraction, **được sử dụng khi ta muốn định nghĩa cho các Grid Items một độ dài tương đối. Khi sử dụng `fr`, chiều rộng của các phần tử sẽ bằng nhau và phụ thuộc vào kích thước cũng như số lượng phần tử có bên trong Grid Container.

Đoạn code trên có thể sửa thành:

```
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}
```

Kết quả ta được như sau:

![ký hiệu fr](https://assets.200lab.io/images/2024/12/05/grid-template-row-and-columns-2-fr-c37650d577c6acf038eb.webp)

Nếu việc viết lặp đi lặp lại giá trị ở  `grid-template-columns` khiến bạn mệt mỏi thì Grid đã cung cấp sẵn cho chúng ta ký hiệu là `repeat`.

```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
}
```

Đoạn code trên được hiểu là lặp lại giá trị `1fr` 3 lần.

### **2.3. Grid Auto Rows và Grid Auto Columns**

Thuộc tính `grid-auto-rows` trong Grid được sử dụng để xác định chiều cao mặc định cho các hàng không được xác định trước trong Grid. Nó quy định chiều cao của các hàng một cách tự động khi ta không khai báo thuộc tính `grid-template-rows` và sẽ được áp dụng cho tất cả các hàng.

```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}
```

Đoạn code trên sẽ cho ra kết quả sau:

![grid-auto-rows](https://assets.200lab.io/images/2024/12/05/grid-auto-row-and-column-57d63393aaba06054641.webp)

Tương tự đối với Grid Auto Colums cũng như vậy.

Ngoài ra, Grid còn cung cấp cho chúng ta thêm một ký hiệu rất hữu ích là `minmax`. Ký hiệu này giúp ta gán giá trị chiều rộng mặc định cho các phần tử có nội dung nhỏ hơn giá trị mà chúng ta gán, đồng thời tự động quy định chiều rộng cho các phần tử có nội dung lớn hơn giá trị mặc định.

Điều này giúp cho giao diện của chúng ta không bị vỡ hay ẩn đi khi nội dung của một Grid Item nào đấy vượt quá chiều rộng cho phép.

Để sử dụng mimax ta có thể viết như sau:

```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: mimax(60px, auto);
}
```

Kết quả:

![mimax](https://assets.200lab.io/images/2024/12/05/grid-auto-row-and-column-mimax-1-94e415bcc485435b8ce7.webp)

Ở đây **60px** là chiều rộng mặc định của tất cả các Grid Item, khi có bất kỳ item nào nó nội dung vượt quá **60px**, nó sẽ tự động được kéo dài ra sao cho vừa đúng với chiều rộng của nội dung bên trong. Trong trường hợp này nó là** 75.60px.**

### **2.4. Grid Column Start và Grid Column End**

Hai thuộc tính `grid-column-start` và `grid-column-end` dùng để quy định điểm bắt đầu và điểm kết thúc của một Grid Item trên một hàng dựa vào các Grid Lines.

Giả sử chúng ta muốn quy định điểm bắt đầu của Grid Item số 5 sẽ bắt đầu từ cột số 2 đến cột số 4 ta làm như sau:

```
.item-5 {
  grid-column-start: 2;
  grid-column-end: 4;
}
```

Kết quả thu được:

![grid-column-start / end](https://assets.200lab.io/images/2024/12/05/grid-column-start-end-40b158068a6141c5dcd9.webp)

### **2.5. Grid Row Start và Grid Row End**

Hai thuộc tính `grid-row-start` và `grid-row-end` cũng tương tự. Vẫn là item số 5 chúng ta cho điểm bắt đầu của nó là từ hàng số 2 đến hàng số 4.

```
.item-5 {
  grid-column-start: 2;
  grid-column-end: 4;

  grid-row-start: 2;
  grid-row-end: 4;
}
```

Kết quả thu được:

![grid-row-start và grid-row-end](https://assets.200lab.io/images/2024/12/05/grid-row-start-end-e5b3984203ecf3b94f05.webp)

### **2.6. Grid Column và Grid Row**

Để viết các thuộc tính `grid-column-start / end` và `grid-row-start / end` được ngắn gọn hơn, chúng ta có thể sử dụng `grid-column` và `grid-row`

```
.item-5 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}
```

### **2.7. Grid Template Area và Grid Area**

Thuộc tính `grid-template-areas` dùng để định nghĩa trước một mẫu vùng (area), các Grid Item có thể sử dụng các tên vùng được định nghĩa từ trước này thông qua thuộc tính `grid-area`.

```
.container {
    display: grid;
    grid-template-areas:
        "aa aa bb"
        "aa aa bb"
}

.item-5 {
    grid-area: aa;
}

.item-4 {
	grid-area: bb;
}
```

Kết quả của đoạn code bên trên sẽ là:

![grid-template-areas](https://assets.200lab.io/images/2024/12/05/grid-template-area-0e89620b63d9c3a05713.webp)

### **2.8. Khi nào nên sử dụng Grid?**

#### **2.8.1. Xây dựng giao diện với cấu trúc phức tạp**

Việc có thể tuỳ chỉnh giao diện theo hai chiều cả hàng và cột giúp cho Grid rất mạnh mẽ trong việc giải quyết các giao diện phức tạp. Đặc biệt với những container có chứa rất nhiều item và ta cần sắp xếp các item ở các vị trí khác nhau nhưng vẫn đảm bảo tính linh hoạt và thẩm mỹ.

![Searching](https://assets.200lab.io/images/2023/08/24/photo-1527689368864-3a821dbccc34-0ef43b76bbf2db390311.jpg)

#### **2.8.2. Đáp ứng linh hoạt mọi tỉ lệ màn hình**

Với thế mạnh là xử lý được nhiều giao diện phức tạp theo hai chiều cộng với được trang bị sẵn nhiều ký hiệu mạnh mẽ như `repeat`, `mimax` hay đơn vị `fr`, Grid có thể đáp ứng tốt gần như mọi tỉ lệ màn hình phổ biến như Desktop, Tablet hay Mobile.

![Techivation M-Loudener being shown in the studio of Silver Eventides. techivation.com](https://assets.200lab.io/images/2023/08/24/photo-1681684227142-67c970ec26b3-4b43d79b184ceb344241.jpg)

## **3. Browser Support**

Hiện tại cả Flexbox và Grid đã được hỗ trợ tốt ở hầu hết các trình duyệt phổ biến hiện nay như Chrome, Firefox, MS Edge,... Tuy nhiên cả hai vẫn còn nhiều hạn chế và hoạt động chưa tốt trên Internet Explorer do Microsoft đã cho dừng phát triển trình duyệt này từ 2022.

Các bạn có thể tham khảo bảng thống kê các phiên bản trình duyệt hỗ trợ Flexbox dưới đây.

![Flexbox Browser Support. Nguồn CanIUse](https://assets.200lab.io/images/2024/12/05/image-60-7544a75accef3435e6df.webp)

Còn dưới đây là bảng thống kê của Grid.

![Grid Browser Support. Nguồn CanIUse](https://assets.200lab.io/images/2024/12/05/image-61-e7484f58ceae8a809ea1.webp)

## **4. So sánh Flexbox với Grid**

### Sự giống nhau giữa Flexbox với Grid

- **Layout**: Cả Flexbox và Grid đều cho phép bạn tạo ra các bố cục (layouts) trên trang web. Chúng giúp bạn quản lý cách các phần tử hiển thị và sắp xếp trên màn hình.
- **Phân chia không gian**: Cả hai công cụ đều cho phép bạn phân chia không gian trên trang web thành các vùng hoặc khu vực để đặt các phần tử con.
- **Kiểm soát vị trí và kích thước của các phần tử con**: Cả Flexbox và Grid đều cho phép bạn dễ dàng kiểm soát cách các phần tử con bên trong container được sắp xếp và căn chỉnh.
- **Tạo ra Responsive Layout**: Cả Flexbox và Grid Layout đều có thể được sử dụng để tạo ra bố cục Resposive tương thích trên nhiều kích thước màn hình và thiết bị khác nhau.

### Sự khác nhau giữa Flexbox với Grid

      Tiêu chí
    Flexbox
    Grid

      Mục tiêu sử dụng

          Phục vụ cho kiểu bố cục một chiều

          Tạo ra các cấu trúc giao diện đơn giản

      Phục vụ cho kiểu bố cục hai chiều

          Tạo ra các cấu trúc giao diện phức tạp

        Trường hợp sử dụng

            Căn chỉnh các phần tử con theo một trục

            Các phần tử con có kích thước không cố định

            Xây dựng cấu trúc lưới hai chiều

            Cần xác định vị trí tương đối chặt chẽ

        Browser support
        Được hỗ trợ tốt trên hầu hết các trình duyệt hiện đại.
        Cũng được hỗ trợ tốt trên hầu hết các trình duyệt hiện đại, nhưng có một số sự khác biệt trong cách một số tính năng cụ thể hoạt động.

**_Tài liệu tham khảo: _**

1. [Basic concepts of CSS Grid trên MDN](<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout>)
2. [A complete Guide to CSS Grid - CSS Tricks](<https://css-tricks.com/snippets/css/complete-guide-grid>)
3. [In-depth introduction to Flexbox - Trustbit](<https://www.trustbit.tech/blog/2021/05/21/in-depth-introduction-to-flexbox>)

Flexbox và Grid, như hai người bạn thân thiết, mỗi người sở hữu những đặc điểm và khả năng riêng biệt. Trong một dự án, bạn sẽ thường thấy họ cùng xuất hiện, bổ sung cho nhau để tạo nên một giao diện linh hoạt và đa dạng. Hãy tưởng tượng Flexbox và Grid như hai bản nhạc khác nhau, khi kết hợp lại, chúng tạo nên một bản hòa tấu hoàn hảo, phục vụ cho mục tiêu chung của dự án.

Bạn đang khao khát khám phá thế giới lập trình, nâng cao kỹ năng và tạo ra những sản phẩm công nghệ đột phá? 200Lab chính là điểm đến lý tưởng cho bạn! Với các khóa học lập trình chất lượng hàng đầu, chúng tôi cam kết đồng hành cùng bạn từ những bước chập chững đầu tiên cho đến khi bạn trở thành một lập trình viên chuyên nghiệp.

Bạn hãy thường xuyên theo dõi [các bài viết hay về Lập Trình & Dữ Liệu trên 200Lab Blog](</>) nhé. Cũng đừng bỏ qua [những khoá học Lập Trình tuyệt vời trên 200Lab](<https://200lab.io/courses?utm_campaign=content&utm_medium=cta&utm_source=blog>) nè.

Cùng 200Lab khám phá thế giới công nghệ sôi động và tạo ra những sản phẩm tuyệt vời. 200Lab không chỉ là một trung tâm đào tạo, mà còn là người bạn đồng hành tin cậy trong hành trình khám phá công nghệ của bạn. Hãy cùng 200Lab viết nên câu chuyện công nghệ của riêng bạn.

[Xem Khoá Học Của 200Lab](<https://200lab.io/khoa-hoc?utm_campaign=ao_productpush&utm_medium=content&utm_source=blog>)

**_Một vài bài viết mới bạn sẽ thích:_**

> [Web 3.0 là gì? Làm sao để trở thành Web3 Developer?](</blog/web3-la-gi>)

> [WebSocket là gì? Lý do sử dụng WebSocket](</blog/websocket-la-gi>)

> [Axios là gì? Tìm hiểu về thư viện Axios](</blog/axios-la-gi>)

> [Tìm hiểu về automation testing](</blog/autmation-testing-la-gi>)

> [Đệ quy là gì? Một số lưu ý khi sử dụng đệ quy](</blog/de-quy-la-gi>)