Xepoca
← Back to Xepoca

Design tool

CSS Grid Generator

Design responsive CSS Grid layouts visually. Configure tracks, gaps, alignment, item positions, spans, and named areas, then copy production-ready HTML and CSS.

🔒 100% private browser processing

Your layout stays on your device. Xepoca generates the preview, HTML, CSS, and downloadable file locally without uploading or storing your work.

Layout presets

Start with a common pattern or continue editing the current grid.

Grid tracks

Build the explicit column and row tracks.

Columns

4 explicit columns

Column 1
Column 2
Column 3
Column 4

Rows

3 explicit rows

Row 1
Sized by content
Row 2
Sized by content
Row 3

Grid settings

Control spacing and alignment inside the container.

Gap unit

Live preview

Select an item to edit its placement and appearance.

No item collisions detected. Named grid areas can be generated safely.

Grid items

Add items and fine-tune the selected item.

Generated output

Copy-ready HTML and CSS

The code updates immediately as you edit the visual layout.

Columns

4

Rows

3

Grid items

7

Occupied cells

12/12

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: stretch;
  align-content: stretch;
}

.grid-item-1 {
  grid-column: 1 / span 4;
  grid-row: 1 / span 1;
  background-color: #22d3ee;
  color: #020617;
}

.grid-item-2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  background-color: #818cf8;
  color: #020617;
}

.grid-item-3 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  background-color: #34d399;
  color: #020617;
}

.grid-item-4 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
  background-color: #f59e0b;
  color: #020617;
}

.grid-item-5 {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
  background-color: #fb7185;
  color: #020617;
}

.grid-item-6 {
  grid-column: 1 / span 3;
  grid-row: 3 / span 1;
  background-color: #a78bfa;
  color: #020617;
}

.grid-item-7 {
  grid-column: 4 / span 1;
  grid-row: 3 / span 1;
  background-color: #38bdf8;
  color: #020617;
}

CSS size

1.04 KB

HTML size

409 B

Named areas

Off

How to build a CSS Grid layout

1

Define the tracks

Add columns and rows, then choose fr, px, percentage, auto, or minmax values for every track.

2

Place the items

Select each item and set its starting row, starting column, row span, and column span.

3

Copy the code

Review desktop, tablet, and mobile preview widths, then copy or download the generated HTML and CSS.

Understanding CSS Grid tracks

A grid track is the space between two adjacent grid lines. Column tracks define horizontal structure, while row tracks define vertical structure. Fractional units distribute available space, fixed units create predictable dimensions, and minmax() combines a lower and upper size boundary.

Use fr for flexible application layouts, pixels for fixed controls or sidebars, percentages when tracks should follow the container width, and autowhen content should determine a track's size.

Grid lines, spans, and areas

CSS Grid numbers lines rather than cells. An item starting at column line 2 and spanning two tracks occupies the second and third columns. The same approach applies to rows.

Named areas provide a more readable alternative for page-level layouts. Xepoca generates area templates only when items do not overlap, because every named area must form one valid rectangular region.

Responsive grid design

A smaller preview helps expose tracks that become cramped on narrow screens. For production responsiveness, combine the generated base grid with media queries or responsive functions such asrepeat(auto-fit, minmax(16rem, 1fr)).

The Card Grid preset demonstrates flexible minmax()tracks. You can copy its values and adapt them to an auto-fit or auto-fill pattern in your project.

Alignment inside CSS Grid

justify-items and align-items position content within each grid area. justify-content andalign-content position the complete grid when its tracks are smaller than the container.

Individual items can override the container usingjustify-self and align-self. Leave them on auto to inherit the container behavior.

Related Xepoca design tools

Build the layout first, then create matching colors and backgrounds with Xepoca's other browser-based design utilities.

CSS Gradient Generator →

Create linear and radial backgrounds for grid containers and items.

Color Picker & Converter →

Choose colors and convert them between HEX, RGB, and HSL.

Frequently Asked Questions

What does the CSS Grid Generator create?+

It creates the grid container rules, row and column tracks, gaps, alignment, item placement, and matching HTML markup. Every change is reflected in the generated code immediately.

Can I use fr, px, percentages, auto, and minmax tracks?+

Yes. Each row and column can use fr, pixels, percentages, auto, or minmax values with independent minimum and maximum units.

Why are named areas unavailable when items overlap?+

A named CSS grid area must be one contiguous rectangle, and each template cell can contain only one area name. Numeric grid-line placement still supports intentional overlaps.

Does Xepoca upload my layout?+

No. The editor, preview, code generation, and file download run locally in your browser. Xepoca does not upload or store your layout.

Can I use the generated code commercially?+

Yes. The generated HTML and CSS are yours to copy, modify, and use in personal or commercial projects.