CSS Grid Generator

CSS Grid Generator: Build Powerful Two-Dimensional Layouts with Precision

CSS Grid Layout is the most powerful layout system available in CSS. Unlike any layout method that preceded it, CSS Grid is explicitly two-dimensional "” it can handle both columns and rows simultaneously, giving you precise control over how elements are placed, sized, and aligned across a complete layout surface. Our CSS Grid Generator provides a visual interface for defining grid templates, placing items, and copying production-ready CSS instantly.

Before CSS Grid achieved stable cross-browser support around 2017, building page-level layouts required float-based frameworks (Bootstrap, Foundation), table-based hacks, or painful combinations of positioning and negative margins. These approaches required rigid HTML structure and often made responsive design needlessly complex. CSS Grid changed everything: with a few declarations on a container, the browser handles complex placement that would have previously required JavaScript measurement.

The Grid Model: Containers, Lines, Tracks, and Cells

Understanding CSS Grid requires familiarity with its core vocabulary:

• Grid container: the element with display: grid or display: inline-grid. Its immediate children become grid items.
• Grid lines: the dividing lines that make up the structure of the grid. Horizontal lines divide rows; vertical lines divide columns. Grid lines are numbered from 1 to n+1 where n is the number of tracks. They can also be named.
• Grid tracks: the space between two adjacent grid lines "” essentially a row or column. Tracks are defined by grid-template-columns and grid-template-rows.
• Grid cell: the smallest unit of a grid "” the intersection of one row track and one column track. A grid item placed in a single cell occupies one cell.
• Grid area: a rectangular region of the grid defined by four grid lines. A grid item can span multiple cells to occupy a larger area.

Defining the Grid Template

grid-template-columns and grid-template-rows

These two properties define the track sizes for columns and rows respectively. Each value in the space-separated list defines one track:

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

This creates a three-column grid where the first column is a fixed 200px, and the remaining two columns share the remaining space equally using the fr unit. Rows are defined with an auto-height first and last row (sized to content) and a fixed 200px middle row.

The fr Unit

The fr (fraction) unit is unique to CSS Grid and represents a fraction of the available free space in the grid container. It is calculated after all fixed-size tracks (pixels, percentages, auto) have been given their space. A column with 2fr receives twice as much free space as a column with 1fr.

grid-template-columns: 1fr 2fr 1fr;
/* First column: 25% of free space
   Second column: 50% of free space
   Third column: 25% of free space */

The fr unit is superior to percentages for track sizing because it respects gap spacing "” percentages would include the gap widths in their calculation, causing overflow.

The repeat() Function

The repeat() function prevents repetitive track definitions:

/* Without repeat */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* With repeat */
grid-template-columns: repeat(4, 1fr);

/* Mixed */
grid-template-columns: 200px repeat(3, 1fr) 200px;

auto-fill and auto-fit: Intrinsically Responsive Grids

The most powerful use of repeat() combines it with auto-fill or auto-fit and the minmax() function to create grids that automatically add or remove columns based on available space:

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

This creates as many 280px-minimum columns as fit in the container, with each column growing to fill remaining space. When the container shrinks, columns wrap automatically. The result is a fully responsive grid with no media queries.

The difference between auto-fill and auto-fit:

• auto-fill: creates as many columns as possible, even if some are empty. Empty column tracks are preserved in the grid structure, preventing existing items from growing into them.
• auto-fit: collapses empty column tracks to zero width. Existing items can then grow (via 1fr) to fill the entire container. For most responsive card grids, auto-fit is preferred because items stretch to fill the row on partially-filled rows.

minmax(): Flexible Track Sizing with Constraints

minmax(min, max) defines a track's size as a range. The track is at least min wide and at most max wide:

grid-template-columns: minmax(200px, 1fr) minmax(400px, 3fr);
/* Column 1: between 200px and 1fr
   Column 2: between 400px and 3fr */

You can use min-content, max-content, auto, and fit-content(value) as min or max values for intrinsic sizing. auto as a max behaves like max-content but participates in fr distribution.

Placing Grid Items

Auto Placement

By default, grid items are auto-placed into the grid following the auto-placement algorithm: items fill cells in row order (left to right, top to bottom) unless explicitly placed. Thegrid-auto-flow property controls this algorithm:

• row (default): fills rows first, adding new rows as needed.
• column: fills columns first, adding new columns as needed.
• dense: can be combined with row or column "” the algorithm backtracks to fill holes left by large items. Useful for image galleries where items have different sizes but you want a compact layout.

grid-column and grid-row: Explicit Placement

Grid items can be explicitly placed using grid line numbers:

.item {
  grid-column: 1 / 3;  /* from line 1 to line 3 (spans 2 columns) */
  grid-row: 2 / 4;     /* from line 2 to line 4 (spans 2 rows) */
}

/* Span keyword */
.item {
  grid-column: 1 / span 2; /* start at line 1, span 2 columns */
  grid-row: 2 / span 2;    /* start at line 2, span 2 rows */
}

/* Negative line numbers count from the end */
.full-width {
  grid-column: 1 / -1; /* spans all columns */
}

Named Grid Lines

Grid lines can be given names in square brackets for more readable placement:

.container {
  grid-template-columns:
    [sidebar-start] 250px
    [sidebar-end content-start] 1fr
    [content-end];
}
.sidebar { grid-column: sidebar-start / sidebar-end; }
.main { grid-column: content-start / content-end; }

grid-template-areas: Named Regions for Visual Layout

One of CSS Grid's most impressive features is grid-template-areas, which lets you define the layout visually as an ASCII map of named regions:

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Each quoted string represents a row. Each word in the string represents a column cell. Repeating a name causes the item to span those cells. Use a period (.) for empty cells. This technique makes complex page layouts self-documenting "” you can read the structure directly from the CSS.

Alignment in CSS Grid

CSS Grid has two sets of alignment properties: those that align the grid tracks within the container, and those that align items within their grid areas.

align-content and justify-content

These properties align the entire grid within the container when the grid is smaller than the container (i.e., when there is free space in the grid container):

• justify-content: aligns grid tracks along the inline (horizontal) axis.
• align-content: aligns grid tracks along the block (vertical) axis.

Both accept start, end, center, space-between, space-around, space-evenly, and stretch.

align-items and justify-items

These properties set the default alignment for all grid items within their respective grid areas:

• justify-items: aligns items along the inline (horizontal) axis within their cell.
• align-items: aligns items along the block (vertical) axis within their cell.

The default value for both is stretch, causing items to fill their grid area. Setting justify-items: center centers all items horizontally within their cells.

align-self and justify-self: Per-Item Overrides

Individual items can override the container's alignment with align-self and justify-self. The place-self shorthand combines both: place-self: center end means align-self: center; justify-self: end.

place-content and place-items Shorthands

place-content shorthand: place-content: center space-between is equivalent to align-content: center; justify-content: space-between. place-items shorthand: place-items: center sets both align-items and justify-items to center.

Implicit Grid: grid-auto-rows and grid-auto-columns

When grid items are placed outside the explicitly defined grid "” either by auto-placement running out of explicit tracks, or by explicit placement beyond the defined lines "” the browser creates implicit tracks. The size of these implicit tracks is controlled by grid-auto-rowsand grid-auto-columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

This ensures that all auto-generated rows are at least 100px tall but expand to fit content. Without this, implicit rows would be sized by the auto keyword (which sizes to content), potentially creating very short rows for small items.

gap, row-gap, column-gap in CSS Grid

The gap property (originally grid-gap) adds gutters between grid tracks:

.container {
  gap: 24px;          /* equal row and column gap */
  gap: 16px 24px;     /* row-gap column-gap */
  row-gap: 16px;
  column-gap: 24px;
}

Like Flexbox, gap only applies between tracks "” not at the outer edges of the grid. This makes it superior to padding on items for consistent gutters. The fr unit respects gap in its calculations, so repeat(3, 1fr) with gap: 24px correctly distributes the remaining space after gaps are accounted for.

Subgrid: Nested Grids Aligned to the Parent

CSS Subgrid, now supported in all major browsers (Chrome 117+, Firefox 71+, Safari 16+), allows a grid item that is itself a grid container to use the parent grid's tracks rather than defining its own. This solves the classic problem of nested grid items not aligning to the outer grid:

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

With subgrid, all cards in a row of cards can share the same row tracks from the parent grid, ensuring that card titles, body text, and CTAs align perfectly across all cards regardless of content length "” without any JavaScript height equalization.

Common CSS Grid Layout Patterns

Classic Page Layout

body {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Holy Grail Layout (Header, Footer, Two Sidebars, Main Content)

.app {
  display: grid;
  grid-template-areas:
    "header header  header"
    "left   main    right"
    "footer footer  footer";
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
}

Responsive Image Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 8px;
}
.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.widget-wide { grid-column: span 8; }
.widget-narrow { grid-column: span 4; }
.widget-full { grid-column: span 12; }

CSS Grid in Practice: Media Queries and Responsive Design

CSS Grid excels at responsive design. Layout changes that required complete HTML restructuring and complex float-based overrides can now be expressed as simple media query changes to the grid template:

.layout {
  display: grid;
  grid-template-areas:
    "sidebar"
    "main"
    "aside";
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .layout {
    grid-template-areas: "sidebar main aside";
    grid-template-columns: 220px 1fr 180px;
  }
}

The same HTML structure works across all screen sizes "” the layout adapts entirely through CSS.

CSS Grid vs Flexbox: Detailed Comparison

The decision between Grid and Flexbox is fundamental to CSS architecture:

• Dimensionality: Flexbox works in one dimension (a row or a column). Grid works in two dimensions (rows and columns simultaneously). If items must align across both axes, use Grid.
• Content-first vs layout-first: Flexbox is content-first "” the layout is driven by the items' sizes. Grid is layout-first "” the tracks are defined independently of item sizes, and items are placed within them.
• Explicit structure: Grid requires defining the structure upfront (grid lines, areas). Flexbox is more ad hoc and adapts to content. Grid is better when you have a known design structure; Flexbox is better when content is dynamic.
• Spanning: Grid items can span multiple rows and columns easily. In Flexbox, spanning multiple columns in a wrap scenario is not possible without changing the markup.

The best practice is to use both: Grid for the overall page and component layout structure, Flexbox for the internal layout of those components.

Accessibility and CSS Grid

CSS Grid's placement capabilities introduce the same accessibility concern as Flexbox ordering: visual order can diverge from DOM order. When using grid-column, grid-row,order, or grid-template-areas to visually reorder elements, verify that keyboard navigation (Tab key) and screen reader reading order (DOM order) still make logical sense. WCAG 2.1 Success Criteria 1.3.2 and 2.4.3 require meaningful and logical sequence.

Tailwind CSS Grid Utilities

Tailwind CSS provides comprehensive Grid utilities:

<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-4">

<!-- Responsive: 1 col mobile, 3 cols desktop -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

<!-- Item spanning 2 columns -->
<div class="col-span-2">

<!-- Auto-fill responsive -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">

Key Tailwind Grid classes: grid, grid-cols-{n}, grid-rows-{n}, col-span-{n}, row-span-{n}, col-start-{n}, col-end-{n}, gap-{n}, place-items-center, auto-cols-fr, auto-rows-fr.

Browser Support for CSS Grid

CSS Grid Level 1 is supported in all modern browsers and has been since 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Global support exceeds 97%. The newer features "” subgrid, masonry layout, container queries integration "” have varying support timelines: subgrid reached all major browsers by 2023 (Chrome 117).

Internet Explorer 11 had an early, prefixed implementation of Grid that was not spec-compliant. IE grid syntax required -ms-grid-column, -ms-grid-row, and other prefixed properties. Autoprefixer can add these automatically for teams that still target IE11.

Using This CSS Grid Generator

Our tool provides a fully visual interface for building CSS Grid layouts. You can define column and row tracks using any valid CSS unit including fr, px, %,auto, minmax(), and repeat(). Place items by dragging them to specific grid areas, set spans, name areas, and configure alignment and gap settings. The generated CSS is clean and production-ready, with Tailwind class equivalents provided alongside. Whether you are prototyping a new page layout or fine-tuning a component's internal structure, the grid generator eliminates the write-refresh-inspect cycle and makes CSS Grid's full power immediately accessible.