HomeToolsGrid

CSS WORKSPACE

Grid

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

CSS Grid Generator

Grid Configuration
4
4
16px
Item 1 Properties
1
2
1
1

Tip: You can also drag items to move them, or drag the bottom-right corner to resize.

VISUAL EDITOR
Item 1
Item 2
Item 3
css
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 16px;

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

.item-2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 2;
}

.item-3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}
A PRACTICAL GUIDE

Design rows and columns together

CSS Grid is useful when items need to align across both rows and columns. It can handle a card gallery, an editorial page, or a dashboard with several regions. Begin with the content’s minimum comfortable width, then choose how many tracks fit at each screen size.

How to use this tool

  1. Set the number of columns and rows, then adjust their sizes. Fractional units share remaining space between tracks.
  2. Use gap for consistent spacing and place items across tracks only when the content needs a larger region.
  3. Copy the container and item CSS. Reduce the column count at narrow widths and test a long heading in each card.

This variation creates as many 260-pixel columns as will fit, then shares extra space. The inner min() prevents the minimum track from exceeding a very small container. Auto-fit collapses empty tracks when there are fewer cards.

Read the reference documentation ↗
Example to try in your project
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}

Before you ship

Fixed-width tracks can overflow a mobile viewport. Also check the logical reading order when placing items manually; a visually pleasing arrangement should still make sense in the HTML.

Explore a related tool