CSS Grid Playground

Experiment with CSS Grid properties and preview layout changes instantly.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Grid Settings

grid-template-columns

Define the column layout. Can be: `1fr 2fr 1fr`, `100px 1fr`, `repeat(3, 1fr)` etc.

Gap 12px

Container width 920px

Number of cells (items) 12

Preview background style

Result code format

Cell Colors

Cell Background

Cell Text

Cell Border

Additional Options

Show indexes Comments in the code

Interactive CSS Grid Preview

Source Code

CSS GRID SNIPPET

/* Generated by Grid Template Columns Sandbox */
/* Paste the CSS into your stylesheet. Optionally copy the HTML into your page. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: min(920px, 100%);
  max-width: 100%;
}

.grid .item {
  background-color: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #3b82f6;
  border-radius: 12px;
  padding: 12px;
  min-height: 56px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* Optional: subtle background for previews */
.preview-surface {
  background: rgba(13,110,253,.06);
  padding: 12px;
  border-radius: 14px;
}

/* HTML Example */
<div class="preview-surface">
  <div class="grid">
    <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 class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
  </div>
</div>

Rate this tool:

Related tools

Other tools you may find useful

CSS Grid Sandbox - learn layout by experiment

CSS Grid is the most powerful layout system in CSS - two-dimensional, supporting both columns and rows at the same time. Sandbox allows you to visually manipulate all Grid properties and see the effect immediately - the fastest way to learn.

CSS Grid sandbox CSS Grid playground test grid-template-columns CSS Grid calculator

Grid container properties

display: grid | inline-grid. grid-template-columns: 1fr 2fr | repeat(3, 1fr) | minmax(200px, 1fr). grid-template-rows: same as columns. grid-template-areas: "header header" "sidebar main" "footer footer". gap (row-gap, column-gap): spacing between cells. place-items: shortcut for align-items + justify-items. place-content: shortcut for align-content + justify-content.

Grid Element Properties

grid-column: 1 / 3 (line 1 to 3 = 2 columns). grid-row: 2 / 4. Shortcut: grid-area: row-start / col-start / row-end / col-end. For areas: grid-area: header. justify-self / align-self: position inside the cell. order: visual order (as in Flexbox).

Unit fr and functions

fr (fraction): 1fr = 1 fraction of available space. 1fr 2fr 1fr: center column 2× wider. repeat(auto-fill, minmax(200px, 1fr)): responsive grid without media queries – columns at least 200px. repeat(auto-fit, ...): like auto-fill but removes empty tracks. minmax(min, max): flexible size with limits.

Grid Areas – semantic layouts

grid-template-areas allows you to name areas and assign elements: header takes up the entire top part, main – center, sidebar – side, footer – bottom. Changing the layout for mobile: just redefining grid-template-areas in @media query – without changing the HTML!

Frequently asked questions

Flexbox or Grid – what to choose?

Grid: 2-dimensional layout (e.g. page with header, sidebar, main, footer). Flexbox: 1-dimensional (row of buttons, list of tabs). You can combine: Grid for the page macrolayout, Flexbox for the components inside the grid. In modern CSS, use both - they are not competitive.

What does 1fr do and what does the car do?

fr: proportional share of free space. auto: content size (like min-content, unless there is extra space - then it increases). grid-template-columns: auto 1fr auto: the middle column takes up all available space, the side ones adjust to the content.

How to make a responsive product grid without media queries?

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). auto-fill: creates as many columns as will fit. minmax(250px, 1fr): each min 250px, max 1fr. At 800px width: 3 columns. At 500px: 2. At 250px: 1. Zero media queries.

What is a subgrid?

CSS Subgrid (Chrome 117+, Firefox 71+): element can inherit parent gridlines. grid-template-columns: subgrid. It allows you to align content inside nested elements to the outer grid lines - a breakthrough for complex cards.

How to debug CSS Grid in Chrome DevTools?

Elements tab → select element with display:grid → "grid" tag will appear. Click → activate grid overlay (lines, column/row numbers, area names). Layout panel elements (right panel): Manage overlays of multiple grids at once.

Related tools: Flexbox sandbox, em/rem to pixel converter and CSS tooltip generator.