FileConverterPro

CSS Grid Generator

Generate CSS Grid layouts visually online for free. Set columns, rows, gaps, and areas with live preview. Copy the CSS and HTML code instantly.

Runs entirely in your browser — files never uploaded

Equal: repeat(3, 1fr)

Equal: repeat(3, 1fr)

1
2
3
4
5
6
7
8
9
CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  justify-items: stretch;
  align-items: stretch;
}
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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

How to use CSS Grid Generator

  1. 1. Configure the grid. Set columns, rows, gaps, and sizing. Use equal sizing or enter custom values like "1fr 2fr 1fr".
  2. 2. Try a preset. Load common layouts like Holy Grail, Sidebar + Main, or Dashboard with one click.
  3. 3. Copy the code. The CSS and HTML update live as you change settings. Click Copy CSS or Copy HTML to grab the code.

FAQ

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you control both columns and rows at the same time, making complex page layouts straightforward.

What does fr mean?

The fr unit represents a fraction of the available space in the grid container. For example, 1fr 2fr gives the second column twice the width of the first.

When should I use Grid vs Flexbox?

Use Grid for two-dimensional layouts (rows and columns together). Use Flexbox for one-dimensional layouts (a single row or column).

Related tools

Advertisement