CSS Grid Playground

An interactive tool to experiment with CSS Grid properties and see the effects in real-time. Adjust grid layout settings and automatically generate Pure CSS, Tailwind CSS, and SCSS code.

How to Use

Set the number of columns and rows to define the basic grid structure

Adjust gaps (spacing) to fine-tune the layout

Add or remove items to see the preview

Set individual item placement and size

Copy the generated CSS, Tailwind, or SCSS code

Key Features

Real-time preview display

Support for all CSS Grid properties

Pure CSS, Tailwind CSS, and SCSS code generation

Dynamic addition and removal of grid items

Intuitive select box controls

Responsive preview

Grid Container Properties

Columns:

Rows:

Selected Item

Item 1

Grid Column

Current: auto

Grid Row

Current: auto

Align Self

Justify Self

auto

Controls horizontal positioning within the grid cell

Align Self

auto

Controls vertical positioning within the grid cell

Grid Container Properties

Column Gap (px)

8px

0pxTight50px

Row Gap (px)

8px

0pxTight50px

Align Items

Justify Items

stretch

Default horizontal alignment for all grid items

Align Items

stretch

Default vertical alignment for all grid items

Preview

3×3 grid

Item 1

Item 2

Item 3

Generated Code

Pure CSS

/* Grid Container Styles */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-flow: row;
}

/* Grid Item Styles */
.grid-item-1 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-2 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-3 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

Frequently Asked Questions

CSS Grid is a powerful two-dimensional layout system that allows you to arrange elements using rows and columns. It's perfect for creating complex layouts with ease.

Flexbox is ideal for one-dimensional layouts (row or column), while CSS Grid excels at two-dimensional layouts (rows and columns). Choose based on your layout requirements.

Yes, the generated code can be used directly in your websites or applications. You can choose from Pure CSS, Tailwind CSS, or SCSS formats.

You can customize the placement freely by setting individual grid-column and grid-row properties for each grid item.

The preview is responsive, but for actual responsive design implementation, you'll need to use media queries to apply different grid settings for different breakpoints.