CSS Grid Generator - Visual Grid Layout Builder Online

Create CSS Grid layouts visually with real-time preview. Define columns, rows, gaps, alignment, grid areas, and item placement — 100% client-side, no data sent to server.

Grid Properties

Display

Columns (3)

Rows (3)

Gap

Row Gap

0px

Column Gap

0px

Justify Items

Align Items

Justify Content

Align Content

Auto Flow

Dimensions

Width

Auto

Height

Auto

400px

Grid Areas

Use Named Areas

Presets

Grid Items

Select an item to edit

Preview

Generated Code

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 400px;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Frequently Asked Questions

What is CSS Grid?

CSS Grid Layout is a two-dimensional CSS layout system that allows you to create complex page layouts by defining rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), CSS Grid handles both horizontal and vertical layout at the same time, making it ideal for full page layouts, dashboards, galleries, and any design requiring items positioned in both rows and columns.

How do I use this CSS Grid generator?

1. Define your grid structure by setting column and row track sizes. 2. Set gaps between cells using the row-gap and column-gap sliders. 3. Configure alignment properties (justify-items, align-items, etc.). 4. Add grid items and set their placement using grid-column/grid-row values, or use the visual area painter for named grid areas. 5. Try a preset layout as a starting point. 6. Copy the generated CSS and HTML code into your project.

Is my data secure?

Yes, completely. This tool runs entirely in your browser using client-side JavaScript. No layout configurations, CSS code, or any data is sent to any server. All code generation and preview rendering happens locally on your device.

What is the difference between CSS Grid and CSS Flexbox?

CSS Grid is two-dimensional (rows AND columns simultaneously), while Flexbox is one-dimensional (either a row OR a column). Use CSS Grid for page-level layouts, dashboards, and galleries. Use Flexbox for simpler linear layouts like navigation bars and card rows. They complement each other: Grid for overall page structure, Flexbox for component-level alignment.

What are grid-template-areas?

grid-template-areas lets you define your layout using named regions instead of numeric line numbers. You assign names like 'header', 'sidebar', 'main' to areas and place items with grid-area. This makes CSS more readable and maintainable, especially for complex layouts with semantic regions.

What does the fr unit mean in CSS Grid?

The fr (fractional) unit represents a fraction of available free space in the grid container. For example, grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice as wide as the sides. The fr unit automatically distributes remaining space after fixed-size tracks (px, %) are accounted for.

How does grid-auto-flow work?

grid-auto-flow controls how auto-placed items fill the grid. 'row' (default) places items left-to-right, top-to-bottom. 'column' places items top-to-bottom, left-to-right. Adding 'dense' tells the browser to fill gaps earlier in the grid, creating a more compact layout but potentially changing the visual order.

Code Examples

// CSS Grid Generator - JavaScript Implementation

function formatTrackSize(value, unit) {
  if (unit === 'auto') return 'auto';
  return `${value}${unit}`;
}

function generateGridCSS(options = {}) {
  const {
    display = 'grid',
    columns = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
    rows = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
    rowGap = 0,
    columnGap = 0,
    justifyItems = 'stretch',
    alignItems = 'stretch',
    justifyContent = 'start',
    alignContent = 'start',
    gridAutoFlow = 'row',
    areas = null,
  } = options;

  const rules = [`display: ${display}`];
  rules.push(`grid-template-columns: ${columns.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
  rules.push(`grid-template-rows: ${rows.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);

  if (areas && areas.length > 0) {
    const areasStr = areas.map(row => `"${row.join(' ')}"`).join('\n  ');
    rules.push(`grid-template-areas:\n  ${areasStr}`);
  }

  if (rowGap > 0 || columnGap > 0) {
    if (rowGap === columnGap) {
      rules.push(`gap: ${rowGap}px`);
    } else {
      rules.push(`gap: ${rowGap}px ${columnGap}px`);
    }
  }

  if (justifyItems !== 'stretch') rules.push(`justify-items: ${justifyItems}`);
  if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
  if (justifyContent !== 'start') rules.push(`justify-content: ${justifyContent}`);
  if (alignContent !== 'start') rules.push(`align-content: ${alignContent}`);
  if (gridAutoFlow !== 'row') rules.push(`grid-auto-flow: ${gridAutoFlow}`);

  return rules.map(r => `${r};`).join('\n');
}

// Usage
console.log(generateGridCSS({
  columns: [{ value: 1, unit: 'fr' }, { value: 2, unit: 'fr' }, { value: 1, unit: 'fr' }],
  rows: [{ value: 100, unit: 'px' }, { value: 1, unit: 'fr' }],
  rowGap: 16,
  columnGap: 16,
}));
// display: grid;
// grid-template-columns: 1fr 2fr 1fr;
// grid-template-rows: 100px 1fr;
// gap: 16px;