CSS Grid Generator

Visual Grid Construction and Code Generation

The CSS Grid Generator provides an interactive canvas to design two-dimensional layouts visually. By defining the grid structure and dragging across cells, you can position child elements and instantly produce production-ready HTML and CSS.

The tool operates entirely within your web browser. No data, layout configurations, or values you input are uploaded to BroBroGo.

---

Grid Configuration and Input Limits

To build a layout, you must first define the structural boundaries of the grid container using the input controls:

• Columns: Accepts a integer value between 1 and 12 to establish the vertical tracks.
• Rows: Accepts an integer value between 1 and 12 to establish the horizontal tracks.
• Column gap: Sets the spacing between vertical tracks using a value from 0 to 48px.
• Row gap: Sets the spacing between horizontal tracks using a value from 0 to 48px.
• Column sizes and Row sizes: Each individual track features its own input box. You can input any valid CSS grid track sizing value, such as 1fr, 200px, auto, min-content, or minmax(120px, 1fr).

If you enter an invalid track size value, such as not-a-grid-track, the interface marks that specific input field as invalid. However, to prevent layout breakage, the generated CSS output retains the last valid value entered for that track.

---

Placing and Managing Grid Items

Once the track dimensions are set, you can place child items directly onto the visual canvas.

+---+---+---+
| 1 | 2 | 3 |  <-- Drag from cell 1 to cell 6
+---+---+---+      to create a single item spanning
| 4 | 5 | 6 |      multiple columns and rows.
+---+---+---+

To place an item, press and drag your cursor across the cells to mark out a rectangular area. Releasing the mouse button creates a placed child item that spans the selected columns and rows.

Placement Rules:

• Item Limit: The tool supports a maximum of 16 items.
• Overlapping: Placed items are allowed to overlap. When items share grid cells, the item drawn later in sequence sits on top of the earlier ones.
• Removal: Each placed item displays a "×" button. Clicking this button removes the item from the canvas and deletes its corresponding code.
• Manual Controls: You can use "Add item" to generate an HTML item, or click "Clear items" to reset the canvas, resulting in an empty HTML container and an item count of 0.

---

Code Generation and Optimization Rules

The generator outputs clean, optimized code split into CSS and HTML blocks. The HTML block contains the grid container and a flat list of div elements representing each placed item. The CSS block contains the rules for the container and the explicit positioning coordinates for each child.

Track Folding with repeat()

To keep the generated CSS concise, the tool analyzes track sizes. If consecutive columns or rows share the exact same size value, they are folded into a CSS repeat() function in the output. For example, three adjacent columns sized at 1fr will output as repeat(3, 1fr).

Gap Consolidation

The column gap and row gap properties are defined independently in the interface. However, if you set both gaps to the same value, the generator collapses them into a single gap shorthand property in the output CSS.

Item Coordinates

Each drawn item receives its own unique CSS rule containing explicit grid-column and grid-row start and end values. This ensures that the browser renders the elements exactly where they were drawn on the visual canvas.

---

Layout Presets

For rapid prototyping, the tool includes four common layout presets that instantly configure the grid tracks and place the items:

---

Frequently Asked Questions

How do I place items on the grid?

Press and drag across the cells to mark out a rectangle — when you let go it becomes a placed child spanning those columns and rows. Each item you draw gets its own grid-column and grid-row rule in the CSS and a matching div in the HTML. Items may overlap, and the one drawn later sits on top; use the × on an item to remove it.

Can the columns and rows be different sizes?

Yes. Every track has its own size box, and you can type any grid value there — 1fr, 200px, auto, min-content or minmax(120px, 1fr). Tracks that share the same size are folded into repeat() so the output stays short. Column gap and row gap are set on their own, and collapse to a single gap when they match.

What do I do with the generated code?

Copy the CSS and the HTML side by side. The HTML gives you the container with one div per item, and the CSS defines the grid and positions each item. Paste both into your project and you get the same layout you drew here.

Is my layout data sent to any external servers?

No. Your grid is built right in your browser. Nothing you set here is uploaded to BroBroGo.