Free Grid Generator | CSS Grid and Flexbox Layout Builder

Adjust columns, gaps, alignment, and Flex direction to build CSS Grid and Flexbox layouts in real time.

Items 6Gap 16pxContainer padding 20pxItem height 104pxColumnsHorizontal alignVertical align

Live preview

Selected card Card 1

Click a card to change its span size.

Column spanRow span

CSS code

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 104px;
  gap: 16px;
  padding: 20px;
  justify-items: stretch;
  align-items: stretch;
}

.layout-item {
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #dbeafe;
}

HTML example

<div class="layout">
  <div class="layout-item item-1">Card 1</div>
  <div class="layout-item item-2">Card 2</div>
  <div class="layout-item item-3">Card 3</div>
  <div class="layout-item item-4">Card 4</div>
  <div class="layout-item item-5">Card 5</div>
  <div class="layout-item item-6">Card 6</div>
</div>

How to use

Select files

Choose Grid or Flexbox mode.

Adjust settings

Adjust columns, spacing, alignment, and item count.

Review and download result

Review the preview and copy the CSS and HTML code.

Real-world scenarios

Useful for mocking card lists, dashboards, and landing sections, then moving the layout code straight into a project.

Compare card-grid spacing and column structures for landing sections.

Preview the difference between Grid and Flexbox arrangements for dashboards.

Share layout-ready code between design and engineering during early concept work.

Free Grid Generator | CSS Grid and Flexbox Layout Builder

How to use

Select files

Adjust settings

Review and download result

Real-world scenarios

Recommended tools

Gradient Generator

Random Palette Generator

Color Picker