#parent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grid-row {
  --row-track-count: 2;
  --row-track-min-height: 180px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(var(--row-track-count), minmax(var(--row-track-min-height), auto));
  grid-auto-flow: dense;
  gap: 10px;
}

.grid-cell {
  --grid-column-start: auto;
  --grid-column-end: span 6;
  --grid-row-start: auto;
  --grid-row-end: span 1;
  grid-column: var(--grid-column-start) / var(--grid-column-end);
  grid-row: var(--grid-row-start) / var(--grid-row-end);
}

.grid-col-span-1 { --grid-column-end: span 1; }
.grid-col-span-2 { --grid-column-end: span 2; }
.grid-col-span-3 { --grid-column-end: span 3; }
.grid-col-span-4 { --grid-column-end: span 4; }
.grid-col-span-5 { --grid-column-end: span 5; }
.grid-col-span-6 { --grid-column-end: span 6; }

.grid-row-span-1 { --grid-row-end: span 1; }
.grid-row-span-2 { --grid-row-end: span 2; }

.grid-col-start-1 { --grid-column-start: 1; }
.grid-col-start-2 { --grid-column-start: 2; }
.grid-col-start-3 { --grid-column-start: 3; }
.grid-col-start-4 { --grid-column-start: 4; }
.grid-col-start-5 { --grid-column-start: 5; }
.grid-col-start-6 { --grid-column-start: 6; }

.grid-row-start-1 { --grid-row-start: 1; }
.grid-row-start-2 { --grid-row-start: 2; }

.grid-row--single {
  --row-track-count: 1;
  --row-track-min-height: 200px;
}

.grid-row--double {
  --row-track-count: 2;
  --row-track-min-height: 100px;
}

.content {
  border-style: double;
  padding: 10px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .grid-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .grid-cell {
    grid-column: span 1;
    grid-row: auto;
  }

  [class*='grid-col-span-'] {
    grid-column: auto;
  }

  [class*='grid-row-span-'] {
    grid-row: auto;
  }
}