CSS Grid is a powerful layout system that allows you to create two-dimensional layouts with rows and columns.

How is Grid different from Flexbox?

Grid is for two-dimensional layouts (both rows and columns), while Flexbox is for one-dimensional layouts. Grid gives you more control over complex layouts.

What are fr units in CSS Grid?

The fr unit represents a fraction of available space in the grid container. For example, 1fr 2fr creates two columns where the second is twice as wide as the first.

PixelTool

Grid Generator

Visual tool for creating CSS Grid layouts

Properties

Columns

Rows

Gap

gap: 16px

Justify Items

Align Items

Auto Flow

Items: 6

Show Numbers

Preview

Generated CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
  grid-auto-flow: row;
}

Related Tools

Other useful tools from the same category

Flexbox Generator

Visual tool for creating CSS Flexbox layouts

css

flexbox

CSS Clamp Calculator

Create fluid typography and spacing that scales smoothly between viewport sizes

css

responsive

CSS Specificity Calculator

Analyze CSS selector specificity to understand cascade rules and optimize your stylesheets

css

specificity