# Thiết lập Layout

## 1. Mục tiêu

Giúp người dùng làm chủ không gian thiết kế, sắp xếp các thành phần nội dung (văn bản, hình ảnh, nút bấm) một cách khoa học, đẹp mắt mà không cần can thiệp vào mã nguồn (code).

## 2. Khi nào sử dụng

* Sử dụng Stack: Khi bạn muốn các thành phần đi theo một dòng hoặc một cột liên tục (ví dụ: nhóm các nút bấm, tiêu đề nằm trên đoạn văn).
* Sử dụng Grid: Khi bạn cần trình bày các khối nội dung có kích thước đều nhau, dạng danh sách (ví dụ: danh sách các phúc lợi, các vị trí tuyển dụng, hoặc các bước quy trình).

## 3. Các bước thực hiện

### Bước 1: Chọn khối bao quanh (Container)

<figure><img src="/files/lQkTDq85OpEKYdmbxYch" alt=""><figcaption></figcaption></figure>

* Trên màn hình thiết kế, chọn trực tiếp vào vùng không gian chứa các thành phần bạn muốn điều chỉnh bố cục.

### Bước 2: Cấu hình cơ chế Stack (Sắp xếp tuần tự)

<figure><img src="/files/gxh4MuavSt9w5IeXfY7V" alt=""><figcaption></figcaption></figure>

Tại bảng điều khiển Layout bên phải, thiết lập các thông số sau:

* Hướng (Direction):
  * Ngang: Các thành phần nằm cạnh nhau trên một hàng.
  * Dọc: Các thành phần xếp chồng từ trên xuống dưới.
* Vị trí (Placement): Sử dụng bảng 9 điểm để căn chỉnh nội dung vào các góc hoặc chính giữa khối.
* Phân phối (Distribution):
  * *Space Between:* Đẩy các thành phần ra sát lề, tạo khoảng cách tối đa ở giữa.
  * *Space Around:* Tạo khoảng cách đều xung quanh mỗi thành phần.
  * *Space Evenly:* Chia đều khoảng cách giữa các thành phần và lề.
* Ngắt dòng (Wrap): Bật tính năng này để các thành phần tự động nhảy xuống dòng mới khi không gian chiều ngang bị giới hạn (rất quan trọng cho giao diện di động).

### Bước 3: Cấu hình cơ chế Grid (Sắp xếp theo lưới)

<figure><img src="/files/liLeYFpFXJrU7tUvyVaV" alt=""><figcaption></figcaption></figure>

Nếu chọn chế độ Grid, bạn cần lưu ý:

* Loại Grid (Type): Chọn *Fixed* để cố định số cột (ví dụ: luôn là 3 cột) hoặc *Auto* để hệ thống tự tính toán theo kích thước nội dung.
* Cột & Hàng (Columns & Rows): Nhập số lượng ô mong muốn.
* Khoảng cách (Gap): Điều chỉnh độ rộng giữa các ô (mặc định 10px) để tạo sự thông thoáng.

### Bước 4: Tinh chỉnh độ co dãn và thứ tự

* Mở rộng (Grow): Chọn *Yes* nếu muốn thành phần tự dãn ra lấp đầy khoảng trống.
* Thu nhỏ (Shrink): Chọn *Yes* để thành phần tự co lại, tránh bị tràn khung khi xem trên màn hình nhỏ.
* Thứ tự (Order): Nhập số thứ tự để thay đổi vị trí ưu tiên của thành phần mà không cần kéo thả lại.

## 4. Các lưu ý quan trọng

* Ưu tiên Mobile: Khi thiết kế Layout dạng ngang, hãy luôn bật tính năng Wrap để tránh việc nội dung bị mất hoặc méo khi xem trên điện thoại.
* Khoảng cách thị giác: Đừng để các thành phần quá sát nhau. Hãy sử dụng thông số Gap tối thiểu từ 15-20px để ứng viên không cảm thấy "ngộp" khi đọc thông tin.
* Thử nghiệm Grow/Shrink: Sử dụng tính năng này cho các khối văn bản dài để đảm bảo giao diện luôn cân đối dù nội dung ngắn hay dài khác nhau.
* Đồng bộ hóa: Nếu bạn thiết kế danh sách tính năng bằng Grid, hãy đảm bảo lượng nội dung trong các ô tương đồng nhau để duy trì tính thẩm mỹ cho trang.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mhiring.vn/mcms/layer/thiet-lap-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.