---
name: css-flexboxgrid-layout-generator
description: "Generate CSS code for complex UI layouts using Flexbox or Grid. Use when the user wants help with CSS Flexbox/Grid Layout Generator. Related topics: coding, css, design."
---

# CSS Flexbox/Grid Layout Generator

Generate CSS code for complex UI layouts using Flexbox or Grid.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Layout Strategy** (choose one: CSS Grid, Flexbox, Tailwind CSS classes)
- **Describe the desired layout** (longer free text)
- **Is it responsive? (Mobile-friendly)** (choose one: Yes, No)
- **Gap/Spacing between items** (choose one: Small (8px), Medium (16px), Large (32px), Custom)
- **Alignment** (choose any: Center items vertically, Center items horizontally, Space evenly, Stretch to fill)
- **Include HTML boilerplate?** (choose one: Yes, No)

## Prompt template

## Introduction
Build responsive CSS layouts without the headache.

## Layout Requirements
- Layout Strategy: {{Layout Strategy}}
- Describe the desired layout: {{Describe the desired layout}}
- Is it responsive? (Mobile-friendly): {{Is it responsive? (Mobile-friendly)}}

## Styling Details
- Gap/Spacing between items: {{Gap/Spacing between items}}
- Alignment: {{Alignment}}
- Include HTML boilerplate? {{Include HTML boilerplate?}}

---
**Goal**: Output the HTML and CSS code to achieve the exact layout described.

---

Source: [CSS Flexbox/Grid Layout Generator on PromptBuild](https://promptbuild.io/prompt/o7b68WeExpcGy4SD1ry4/css-flexboxgrid-layout-generator)