# How to Create Action Breakdown Reference Sheets with a 4x4 Grid

> Learn to create action breakdown reference sheets using a 4x4 grid. Extend the .templateGrid class in CSS for a dynamic layout with 16 cells, no JavaScript needed.

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

---

**You can build action breakdown reference sheets with a 4x4 grid by extending the `.templateGrid` class in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css) and populating 16 grid cells with action metadata, requiring zero JavaScript for the static layout.**

The awesome-gpt-image-2 repository provides a battle-tested CSS grid architecture that makes organizing complex action sequences into scannable reference sheets straightforward. By leveraging the existing grid definitions and style library data, you can implement a responsive 4x4 action breakdown layout that maintains visual consistency with the rest of the application.

## Understanding the Grid Architecture in src/styles.css

The foundation for your action breakdown sheet lies in the CSS grid system defined in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css). According to the awesome-gpt-image-2 source code, the base grid pattern establishes center alignment and responsive behavior at line 44:

```css
/* Line 44-47 in src/styles.css */
display: grid;
place-items: center;

```

For the specific 4-column layout you need, the repository already implements a `.templateGrid` class at lines 1035-1036:

```css
.templateGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

```

This pattern uses `minmax(0, 1fr)` to ensure columns shrink and grow evenly while maintaining proportional spacing. If you need to reference a wider layout alternative, the codebase also includes an 8-column "hot-strip" grid at lines 737-739, demonstrating the flexibility of the grid system.

## Step-by-Step Implementation Guide

### Define the 4x4 Grid CSS Class

Create a specialized `.actionGrid` class by extending the existing grid patterns in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css). Add this near the other grid definitions:

```css
/* src/styles.css – 4x4 action breakdown grid */
.actionGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;               /* increased spacing for readability */
}

.actionCell {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(9, 15, 32, 0.68);
  border-radius: 8px;
  text-align: center;
}

.actionCell:hover {
  border-color: rgba(103, 232, 249, 0.7);
  background: rgba(9, 15, 32, 0.85);
}

```

The `actionCell` styling uses the repository's existing color palette—semi-transparent dark backgrounds (`rgba(9,15,32,0.68)`) and cyan accent borders (`rgba(103,232,249,0.7)`)—to match the visual language defined in the awesome-gpt-image-2 design system.

### Build the HTML/JSX Structure

Insert your grid markup in any component file, such as [`src/community.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.jsx):

```jsx
<section className="actionGrid">
  <div className="actionCell">
    <strong>🔧 Init</strong><br />
    Initialise Supabase client
  </div>
  <div className="actionCell">
    <strong>📦 Load</strong><br />
    Retrieve case library
  </div>
  <div className="actionCell">
    <strong>⚙️ Filter</strong><br />
    Apply category filters
  </div>
  <div className="actionCell">
    <strong>🚀 Generate</strong><br />
    Request image generation
  </div>
  {/* Add up to 12 additional cells for a complete 4x4 sheet */}
</section>

```

Each cell accommodates an icon, action title, and description. The grid automatically handles the 4-column wrapping, creating a 4x4 matrix when you provide exactly 16 cells.

### Populate with Style Library Data (Optional)

To keep your action breakdown sheet synchronized with the rest of the UI, consume the existing style library from [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json):

```jsx
import styleLib from '../data/style-library.json';

export const ActionBreakdown = () => (
  <section className="actionGrid">
    {styleLib.actions.slice(0, 16).map((action) => (
      <div className="actionCell" key={action.id}>
        <strong>{action.icon} {action.title}</strong><br />
        {action.description}
      </div>
    ))}
  </section>
);

```

This approach pulls actions, icons, and metadata directly from the repository's centralized data store, ensuring your reference sheet stays current when the style library updates. The `slice(0, 16)` method guarantees a perfect 4x4 grid regardless of how many actions exist in the library.

## Responsive Design Considerations

The grid layout automatically maintains responsiveness through two key mechanisms in the awesome-gpt-image-2 codebase:

- **Flexible column sizing**: The `minmax(0, 1fr)` declaration in `grid-template-columns` allows columns to shrink to zero if necessary while distributing available space proportionally
- **Container constraints**: Wrap your grid in a container using the repository's standard section classes (such as `.skillSection`) which implement `max-width: min(1180px, calc(100% - 32px))` to prevent overflow on narrow viewports

Test your implementation by running `npm run dev` and verifying that the 4x4 grid collapses gracefully on mobile devices while maintaining the four-column structure on desktop screens.

## Summary

- **Reuse existing patterns**: Extend the `.templateGrid` definition in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css) rather than writing new grid logic from scratch
- **Target 16 cells**: Populate exactly 16 grid items to create a balanced 4x4 action breakdown sheet
- **Match the design system**: Use `rgba(9,15,32,0.68)` backgrounds and `rgba(103,232,249,0.7)` hover states to maintain visual consistency
- **Leverage style-library.json**: Import action data from [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) to keep content synchronized with the repository's template definitions
- **Zero JavaScript required**: Static reference sheets work with pure HTML/CSS, though React components can consume JSON data for dynamic rendering

## Frequently Asked Questions

### How do I customize the grid spacing for different screen sizes?

Modify the `gap` property in your `.actionGrid` class definition using CSS media queries. The base repository uses a 12px gap for `.templateGrid`, but you can increase this to 16px or 24px for action breakdown sheets that require more visual breathing room between complex action descriptions.

### Can I use vanilla HTML instead of JSX to create these reference sheets?

Yes. Replace `className` with `class` attributes and insert the markup into any HTML file that links to [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css). The grid system relies entirely on CSS—no JavaScript framework is required for the layout to function, making it compatible with static site generators or plain HTML documentation.

### Where does the action data come from in the awesome-gpt-image-2 repository?

Action metadata is stored in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), which contains structured entries for prompts, tags, and action definitions. This JSON file serves as the single source of truth for the project's template system, and you can reference it in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) for detailed semantics about each action type.

### Will the 4x4 grid work on mobile devices?

Yes. The `minmax(0, 1fr)` column definition ensures the grid adapts to narrow viewports, though you may want to add a media query to switch to a 2-column layout on screens below 768px width. The existing container constraints in the codebase (using `calc(100% - 32px)` padding) prevent horizontal overflow on small screens.