DevToolBox

CSS Subgrid Generator

Generate CSS Grid and Subgrid layouts with live preview

Parent Grid Settings

Child Subgrid Settings

Generated CSS
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}

.child-subgrid {
  display: grid;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: inherit;
}

Live Preview

S1
S2
S3
S4
3
6
7
8
9

Legend:

  • • Gray boxes: Parent grid cells
  • • Colored boxes (S1, S2...): Child subgrid cells
  • • The child inherits parent grid lines