# Tool: Create Prompt for CSS Grid and Flexbox Layouts

> Solve complex layout challenges with the BOPINK CSS Layout Prompt Engine. Designed for Frontend Engineers and Web UI Developers, this tool constructs prompts for writing clean CSS3 layouts using CSS Grid auto-fit/auto-fill templates, Flexbox distribution, subgrid alignment, and fluid container queries without relying on heavy JavaScript dependencies.

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

## Domain Parameters:
- `layoutTechnique` (select): CSS Layout Engine (Default: "CSS Grid")
- `containerQueries` (toggle): Modern Container Queries (@container) (Default: "true")
- `preventCLS` (toggle): CLS (Cumulative Layout Shift) Guard (Default: "true")
- `minCardWidth` (input): Grid Card Minimum Width (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"
}
```