CSS Grid Generator
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Select areas on canvas above to generate grid.
Rows number
Columns
Row gap / Column gap (rem)
/


CSS Grid Generator

Visual CSS Grid Generator - Description

This Visual CSS Grid Generator lets you design responsive grid layouts directly on a canvas. Click and draw grid areas to place rows, columns and items visually, the tool translates your actions into clean, ready-to-use CSS. Adjust gaps (row-gap / column-gap) with the gap controls for consistent spacing between items. It’s ideal for experimenting with layout ideas, creating complex templates with named grid areas, and quickly producing the CSS you can drop into your project. The generator shows both the visual grid on the canvas and the resulting CSS rules side-by-side, so you can learn how visual choices map to code.

CSS Grid Layout - Brief Tutorial

CSS Grid Layout is a powerful two-dimensional layout system that allows you to design complex web layouts easily using rows and columns. Unlike Flexbox, which is primarily one-dimensional, Grid can handle both horizontal and vertical alignment simultaneously. With Grid, you can create precise, responsive, and elegant layouts with minimal code.

1. Getting Started

To use CSS Grid, you first need to define a grid container. This is done by setting display: grid or display: inline-grid on an element. The direct children of this element automatically become grid items.

.container {
  display: grid;
}

Or:

.container {
  display: grid;
}

Once you have a grid container, you can define the number of rows and columns using the grid-template-columns and grid-template-rows properties.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: auto 300px auto;
}

In this example, we have three columns: one fixed at 200px, one flexible (using fr units), and one fixed at 100px. The rows are automatically sized except for the middle one, which has a fixed height of 300px.

In generator columns and rows are fixed to 1fr but you can make changes manually.

2. Track Sizing and the fr Unit

The fr (fractional) unit is unique to CSS Grid. It represents a fraction of the available space within the grid container. For example, grid-template-columns: 1fr 2fr; creates two columns — the second one will always be twice as wide as the first.

3. Repeat Function

The repeat() function helps you avoid repetition when defining many similar tracks:

grid-template-columns: repeat(3, 1fr);

This creates three equal-width columns. You can also combine repeat() with minmax() for more flexibility:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

This example automatically fits as many 200px-wide columns as possible while still being responsive.

4. Gaps Between Tracks

You can control spacing between grid rows and columns using gap, row-gap, and column-gap:

.container {
  display: grid;
  gap: 2rem;
}

This adds 2rem of space between each grid item.

To be more precise we can control spacing in this way:

.container {
  display: grid;
  row-gap: 2rem;
  column-gap: 1rem;
}

5. Placing Items

Each grid item can be positioned precisely using grid-column and grid-row properties. They define where the item starts and ends along the grid lines.

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

This places the item from column line 1 to 3, spanning two columns, and row line 1 to 2.

6. Named Areas (currently not used in generator)

Grid allows you to name specific areas and assign items to them for a more semantic layout. Use grid-template-areas in the container and grid-area in the items:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

This structure creates a simple page layout with a header, sidebar, main content, and footer.

7. Implicit vs Explicit Grids

Tracks defined with grid-template-* are explicit tracks. When you place items outside those tracks, CSS Grid automatically creates implicit tracks. You can control their size using grid-auto-rows or grid-auto-columns:

grid {
  grid-auto-rows: 150px;
}

8. Auto-placement and Flow

By default, Grid auto-places items in rows. You can change this behavior with grid-auto-flow:

grid-auto-flow: column;

Or use grid-auto-flow: dense; to fill in gaps with smaller items, similar to a masonry layout.

9. Alignment and Justification

Grid makes alignment simple. You can align the entire grid, all items, or individual items.

grid {
  justify-items: center;
  align-items: center;
}

10. Responsive Grid Layouts

Grid is inherently responsive. The combination of fr units, minmax(), and auto-fit or auto-fill enables layouts that adapt to any screen size.

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

This automatically creates as many 250px columns as fit in the available space, adjusting dynamically on smaller screens.

11. Nested Grids

Each grid item can itself be a grid container. This allows you to create complex nested layouts easily.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.child {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

12. Shorthand Properties

CSS Grid has several shorthand properties to simplify syntax:

13. Browser Support

CSS Grid is widely supported in all modern browsers. However, for full compatibility, especially in older browsers, check Can I use CSS Grid.

14. Best Practices

15. Summary

CSS Grid Layout gives you unprecedented control over web design. It simplifies the process of building multi-row and multi-column layouts without relying on floats or positioning hacks. Whether you’re designing a simple gallery or a complex application dashboard, Grid allows your layout to remain flexible, readable, and maintainable.

Last update: 19. 10. 2025.