# How to Create a Multi-Style Signature Selection Poster with a 6-Card Grid

> Learn to create a multi-style signature selection poster using a 6-card grid. Define JSON layouts and leverage CSS grid for a responsive design. Get your poster rendered beautifully.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: tutorial
- Published: 2026-08-26

---

**You can create a multi-style signature selection poster by defining a JSON layout with six card objects and leveraging the CSS grid definition at `src/styles.css#L1368` to render them in a responsive 6-column layout.**

The **awesome-gpt-image-2** repository provides a JSON-driven prompt system for generating AI-powered posters with customizable grid layouts. By combining a specific CSS grid configuration with a structured JSON payload, you can produce signature selection posters that display six distinct visual styles in a single cohesive image.

## Understanding the Grid Architecture

The rendering system relies on a clear separation between the visual layout (CSS) and the content structure (JSON).

### The CSS Foundation in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css)

At line 1368 of [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css), the repository defines the six-column grid rule that powers the layout:

```css
grid-template-columns: repeat(6, minmax(0, 1fr));

```

([src/styles.css#L1368](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css#L1368))

This CSS rule ensures that the poster container distributes six cards evenly across the width, creating the foundation for your signature selection grid.

### The JSON Layout Structure

Each card in the grid is defined as a **photo object** within the JSON layout. These objects support individual style arguments including signature text, decorative doodles, and custom messages. The backend `generate-image` API processes this JSON by merging it with templates from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and style definitions from [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).

## Building the 6-Card JSON Layout

To create your poster, construct a JSON payload that specifies six cards in the layout grid. Each card description uses placeholder syntax that the prompt engine expands using the style library.

Here is a complete, ready-to-use JSON configuration:

```json
{
  "type": "signature-selection-poster",
  "theme": "multi-style",
  "layout": {
    "grid": {
      "columns": 6,
      "cards": [
        { "position": "1", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with heart doodle" },
        { "position": "2", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with sparkle doodle" },
        { "position": "3", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with bunny doodle" },
        { "position": "4", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with flower doodle" },
        { "position": "5", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with star doodle" },
        { "position": "6", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with message '{argument name=\"message text\" default=\"Thanks for the support!\"}'" }
      ]
    }
  },
  "style": "graffiti-sketch",
  "background": "white",
  "size": "9:16"
}

```

**Key configuration fields:**

- **`layout.grid.columns`**: Maps directly to the CSS `repeat(6, ...)` rule and tells the backend to expect six cards.
- **`cards[].description`**: Contains placeholder-rich strings using the `{argument name="..."}` syntax defined in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).
- **`style`**: Selects a visual preset from the style library (e.g., "graffiti-sketch").
- **`background`** and **`size`**: Control the final image dimensions and backdrop.

## Integrating with the Prompt Engine

The **prompt engine** merges your JSON layout with the style library ([`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)) and template files ([`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)) to build the final AI prompt. When processing your request, the engine expands placeholders like `{argument name="signature text"}` into concrete text values and constructs a single comprehensive prompt for the image model.

The frontend component in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) receives the generated image URL and renders it inside a `<div class="poster-grid">` container, which automatically applies the six-column CSS grid defined in the stylesheet.

## Generating the Poster via API

Send your JSON payload to the `/api/generate-image` endpoint to generate the poster. Here is a Node.js implementation:

```javascript
import fetch from 'node-fetch';

const payload = {
  "type": "signature-selection-poster",
  "theme": "multi-style",
  "layout": {
    "grid": {
      "columns": 6,
      "cards": [
        { "position": "1", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with heart doodle" },
        { "position": "2", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with sparkle doodle" },
        { "position": "3", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with bunny doodle" },
        { "position": "4", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with flower doodle" },
        { "position": "5", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with star doodle" },
        { "position": "6", "description": "signature '{argument name=\"signature text\" default=\"Hanashi\"}' with message '{argument name=\"message text\" default=\"Thanks for the support!\"}'" }
      ]
    }
  },
  "style": "graffiti-sketch",
  "background": "white",
  "size": "9:16"
};

const res = await fetch('https://your-domain.com/api/generate-image', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});

const data = await res.json();
console.log('Poster URL:', data.imageUrl);

```

The API returns a JSON object containing the `imageUrl` of your generated multi-style signature selection poster.

## Summary

- The **6-card grid** is defined in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css) at line 1368 using `grid-template-columns: repeat(6, minmax(0, 1fr))`.
- **JSON layout objects** control the content of each card through the `layout.grid.cards` array, supporting custom signatures and doodles.
- **Placeholder syntax** (`{argument name="..."}`) in card descriptions links to definitions in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).
- The **`/api/generate-image`** endpoint processes the JSON and returns a rendered poster URL.
- The frontend in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) displays the result using the CSS grid container class `poster-grid`.

## Frequently Asked Questions

### What file controls the 6-column grid layout in awesome-gpt-image-2?

The CSS rule that creates the six-column layout is located at line 1368 in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css). It uses `grid-template-columns: repeat(6, minmax(0, 1fr))` to distribute six cards evenly across the poster width.

### How do I customize the signature text for each card in the grid?

Each card's `description` field in the JSON layout uses placeholder syntax like `{argument name="signature text" default="Hanashi"}`. You can modify the default value in the JSON or configure the style library in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) to accept dynamic inputs via the API request.

### Can I change the number of cards from 6 to a different number?

Yes. To display a different number of cards, update the `layout.grid.columns` value in your JSON payload and modify the corresponding CSS rule in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css) to use `repeat(N, minmax(0, 1fr))` where N is your desired card count. The JSON layout and CSS grid work independently but must align numerically.

### Where are the visual styles defined for the signature posters?

Visual styles are stored in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) and referenced by the `style` field in your JSON payload (e.g., "graffiti-sketch"). The prompt engine merges these style definitions with your layout specifications and the templates in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) to generate the final AI prompt.