:root {
  --gw: 100%;
  --gg: 20px;
  --gc: 12;
  --gr: auto;
  --x: auto;
  --y: auto;
  --w: auto;
  --h: auto;
}
.basegrid {
  width: var(--gw);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--gc), 1fr);
  grid-gap: var(--gg);
  grid-auto-rows: var(--gr);
  grid-auto-flow: row dense;
}
.basegrid > div {
  grid-column: var(--x) / span var(--w);
  grid-row: var(--y) / span var(--h);
}
.basegrid.fixed {
  grid-auto-rows: calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg));
}
.basegrid.expand {
  grid-auto-rows: minmax(
    calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg)),
    max-content
  );
}
@media screen and (max-width: 940px) {
  .basegrid.res {
    --gw: 100vw !important;
    grid-auto-rows: none;
  }
}
@media screen and (max-width: 600px) {
  .basegrid.res {
    display: block;
  }
}