Skip to main content
SlapMyWeb
Get started
Skip to tool
CSS & Design tools/All tools
Free tool

CSS grid generator

Build CSS Grid layouts visually. Adjust columns, rows, gaps and track sizes — copy production-ready CSS and HTML instantly.

Column sizes
C1
C2
C3
Row sizes
R1
R2
1
2
3
4
5
6
css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
html
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

What is CSS Grid Generator?

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, creating complex page layouts without floats or positioning hacks. This generator provides a visual interface where you adjust columns (1-6), rows (1-6), gaps, and individual track sizes using fr units, pixels, auto, or minmax values. A live preview updates in real-time showing numbered colored cells in the exact layout your CSS will produce. The tool outputs both the CSS for the grid container and the HTML markup for the grid items, ready to paste into your project. Whether you are building a card grid, a dashboard layout, or a photo gallery, this tool eliminates trial-and-error by letting you see the result before writing a single line of code. All processing runs in your browser with zero server communication.

How to Use CSS Grid Generator

  1. 1

    Set columns and rows

    Use the sliders to choose between 1 and 6 columns and 1 and 6 rows. The preview updates instantly so you can see the grid structure as you adjust.

  2. 2

    Adjust gaps and track sizes

    Set column and row gaps from 0 to 40 pixels. For each column and row, choose a size unit — fr for fractional units, px for fixed pixels, auto for content-based sizing, or minmax for flexible ranges.

  3. 3

    Copy CSS and HTML

    Click Copy CSS for the grid container styles including grid-template-columns, grid-template-rows, and gap. Click Copy HTML for a container div with numbered child items ready for your page.

Features

  • Visual grid builder with 1-6 columns and 1-6 rows
  • Per-track size control with fr, px, auto, and minmax units
  • Independent column gap and row gap sliders (0-40px)
  • Live preview with colored numbered cells
  • Separate CSS and HTML output with one-click copy
  • Zero server upload — all processing in your browser

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool

CSS Animation Generator

Build CSS keyframe animations with visual timeline. Presets for fade, slide, bounce and spin.

Open tool
See all CSS & Design tools

Frequently Asked Questions

What are fr units in CSS Grid?+
The fr unit represents a fraction of the available space in the grid container. If you set three columns to 1fr 2fr 1fr, the middle column gets twice as much space as each side column. It is the most flexible way to divide grid space proportionally.
When should I use minmax instead of fr?+
Use minmax when you want a track to be flexible but with bounds. For example, minmax(200px, 1fr) means the column will be at least 200px wide but can grow to fill available space. This is useful for responsive layouts that need minimum content widths.
Can I use this for responsive layouts?+
The generated CSS works as a starting point. For responsive designs, wrap the grid styles in media queries to change column counts at different breakpoints, or use auto-fit/auto-fill with minmax for fully fluid grids.
What is the difference between column gap and row gap?+
Column gap controls the horizontal space between grid columns, while row gap controls the vertical space between rows. Setting them independently lets you create layouts with tighter vertical spacing and wider horizontal gutters, or vice versa.
Does CSS Grid work in all browsers?+
CSS Grid is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has had full support since 2017. The only browsers lacking support are Internet Explorer 11 and older, which use an outdated grid specification.
Can I nest grids inside grid items?+
Yes. Any grid item can itself become a grid container by applying display: grid to it. This is common for complex layouts like dashboards where a main grid holds sections that each have their own internal grid structure.