TR ToolRux

CSS Grid Generator

Build CSS grid layouts with a visual builder — configure columns, rows, gaps, alignment, and per-cell spans.

Live Preview

1
2
3
4
5
6
7
8
9

Click a cell to edit its span

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  column-gap: 8px;
  row-gap: 8px;
  justify-items: stretch;
  align-items: stretch;
}

Grid Properties

Related Tools

You might also find these useful

Flexbox Generator

Build CSS Flexbox layouts visually.

CSS Animation Generator

Create animations with keyframes.

CSS Gradient Generator

Design CSS gradients.
📖 Learn More

Everything you need to know

Interactive Grid Builder

The CSS Grid Generator provides a visual interface for building grid layouts. Adjust the number of columns and rows, choose column and row sizing, and set gaps — all with instant live preview. Each grid cell is rendered as a colored box you can click to configure spans.

Column & Row Span Controls

Click any cell in the preview to edit its column span and row span. This lets you create complex layouts like hero sections, sidebars, and dashboards without manually calculating grid line numbers.

Flexible Sizing Options

Choose column sizes from fr units, auto, minmax(), or fixed pixel values. Row sizing supports the same options. The generated CSS uses the repeat() function for clean, maintainable code.

Copy & Paste

The generated CSS includes the grid container and any child items with non-default spans. Copy the complete code with one click and paste it directly into your project. The output is production-ready CSS.

Related Tools

Build one-dimensional layouts with the Flexbox Generator, create animations with the CSS Animation Generator, or generate border-radius values with the Border Radius Generator.