Is this CSS grid generator free?

Yes, completely free with no account or login required. You can generate and copy as many layouts as you need.

Does this generate responsive CSS with media queries?

Yes. The generated CSS includes @media query breakpoints for desktop (default, no query), tablet (max-width: 1024px), and mobile (max-width: 768px). You configure each breakpoint separately.

Can I position individual grid items to span multiple columns or rows?

Yes. In CSS Grid mode, click any item in the Items panel, then set grid-column-start, grid-column-end, grid-row-start, and grid-row-end. Values like "span 2" or "1" are supported. Each breakpoint can have different positioning.

What is the fr unit in CSS Grid?

The fr unit stands for fraction of available space. repeat(3, 1fr) creates three equal columns. It is like a flexible percentage that automatically accounts for the gap between columns.

What does minmax() do in CSS Grid?

minmax(min, max) sets a minimum and maximum size for a grid track. For example, minmax(250px, 1fr) makes a column at least 250px wide but able to grow. Combined with repeat(auto-fit, ...), it creates a fully responsive grid without media queries.

What is the difference between auto-fit and auto-fill?

Both fill the grid with columns automatically. auto-fit collapses empty columns, allowing existing items to stretch. auto-fill keeps empty tracks, maintaining consistent column sizing. auto-fit is usually preferred for responsive card grids.

When should I use CSS Grid vs Flexbox?

Use CSS Grid for two-dimensional layouts where you need explicit control over both rows and columns — page layouts, dashboards, card grids. Use Flexbox for one-dimensional layouts where items flow in a row or column — navigation bars, button groups, inline elements.

How do I use the generated CSS in my project?

Copy the CSS and paste it into your stylesheet. Add the class name shown in the HTML Example (grid-container or flex-container) to your container element in HTML. If you positioned specific items, add grid-item-1, grid-item-2, etc. classes to those elements.

Advanced CSS Layout Generator

Visual CSS Grid & Flexbox builder — responsive code, SCSS, Tailwind, and more

Minify

Breakpoint

Presets

Grid Settings — desktop

grid-template-columns

grid-template-rows

gap

row-gap

column-gap

grid-auto-rows

align-content

justify-content

place-items

Items (6)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Live Preview — desktop

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

💡 Click items to select & configure position🎯 Each breakpoint can have unique positioning

Generated Code

/* Desktop (Default) */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-auto-rows: minmax(150px, auto);
}

/* Tablet */
@media (max-width: 1024px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    grid-auto-rows: minmax(120px, auto);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    grid-auto-rows: minmax(100px, auto);
  }
}

Implementation Guide

• Copy the code above and paste into your stylesheet
• Add class grid-container to your container element
• The layout responds automatically to screen size changes

HTML Example

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

Pro Tips

•fr units: 1fr = one fraction of free space. repeat(3,1fr) = 3 equal columns.

•auto-fit magic: repeat(auto-fit,minmax(250px,1fr)) creates a fully responsive grid — no media queries needed.

•Spanning items: Use grid-column: span 2 or column-start: 1; column-end: 3 to make cells span multiple tracks.

•SCSS nesting: The SCSS output uses nested @media for cleaner, more maintainable code with CSS custom properties.

•align vs justify: In grid: align = block axis (vertical), justify = inline axis (horizontal).

•minmax(): minmax(min,max) = column is at least min, at most max. Combine with auto-fit for zero-query responsive layouts.