# Tool: Tạo Prompt Cho Bố Cục CSS Grid & Flexbox

> Giải quyết các bài toán bố cục phức tạp với Bộ máy Prompt Layout CSS BOP Prompts. Được thiết kế cho Frontend Engineer và Lập trình viên Web UI, công cụ này xây dựng các prompt để viết bố cục CSS3 sạch sẽ sử dụng CSS Grid template auto-fit/auto-fill, căn chỉnh Flexbox, canh dòng subgrid và truy vấn vùng chứa (container queries) linh hoạt mà không phụ thuộc vào các thư viện JavaScript nặng nề.

**Category**: prompts-code-design | **Target AI Models**: Gemini 3.6 Flash, Claude 3.5 Sonnet

## Domain Parameters:
- `layoutTechnique` (select): Kỹ thuật bố cục CSS (Default: "CSS Grid")
- `containerQueries` (toggle): Truy vấn vùng chứa hiện đại (@container) (Default: "true")
- `preventCLS` (toggle): Lá chắn chống dịch chuyển bố cục (CLS) (Default: "true")
- `minCardWidth` (input): Độ rộng tối thiểu của Card trong Grid (Default: "280px")

## Master Prompt Engineering Architecture (5 Pillars):
1. **Role & Persona**: Domain expert framing
2. **Task & Deliverable**: Primary objective & constraints
3. **Context & Parameters**: Technical specs & camera/stack parameters
4. **Negative Constraints**: Forbidden artifacts & bad practices
5. **Output Spec**: Section formatting & XML/Markdown structure

## Programmatic API Execution:
```http
POST /api/generate-prompt
Content-Type: application/json

{
  "toolSlug": "create-prompt-for-css-grid-and-flexbox-layouts",
  "rawPrompt": "Your raw concept here",
  "thinkingLevel": "HIGH"
}
```