.grid {
  display: grid;
}

.gridGap0 {
  grid-gap: 0;
}

.gridGap1 {
  grid-gap: var(--gap-1, var(--space-1));
}

.gridGap2 {
  grid-gap: var(--gap-2, var(--space-2));
}

.gridGap3 {
  grid-gap: var(--gap-3, var(--space-3));
}

.gridGap4 {
  grid-gap: var(--gap-4, var(--space-4));
}

.gridGap5 {
  grid-gap: var(--gap-5, var(--space-5));
}

.gridGapX0 {
  grid-row-gap: 0;
}

.gridGapX1 {
  grid-row-gap: var(--gap-1, var(--space-1));
}

.gridGapX2 {
  grid-row-gap: var(--gap-2, var(--space-2));
}

.gridGapX3 {
  grid-row-gap: var(--gap-3, var(--space-3));
}

.gridGapX4 {
  grid-row-gap: var(--gap-4, var(--space-4));
}

.gridGapX5 {
  grid-row-gap: var(--gap-5, var(--space-5));
}

.gridGapY0 {
  grid-column-gap: 0;
}

.gridGapY1 {
  grid-column-gap: var(--gap-1, var(--space-1));
}

.gridGapY2 {
  grid-column-gap: var(--gap-2, var(--space-2));
}

.gridGapY3 {
  grid-column-gap: var(--gap-3, var(--space-3));
}

.gridGapY4 {
  grid-column-gap: var(--gap-4, var(--space-4));
}

.gridGapY5 {
  grid-column-gap: var(--gap-5, var(--space-5));
}

.gridColsdense {
  grid-auto-flow: row dense;
}

.gridCols,
[class*="gridCols"] {
  grid-auto-flow: row;
}

.gridCols2 {
  grid-template-columns: repeat(2, 1fr);
}

.gridCols3 {
  grid-template-columns: repeat(3, 1fr);
}

.gridCols4 {
  grid-template-columns: repeat(4, 1fr);
}

.gridCols5 {
  grid-template-columns: repeat(5, 1fr);
}

.gridCols6 {
  grid-template-columns: repeat(6, 1fr);
}

.gridCols7 {
  grid-template-columns: repeat(7, 1fr);
}

.gridCols8 {
  grid-template-columns: repeat(8, 1fr);
}

.gridCols9 {
  grid-template-columns: repeat(9, 1fr);
}

.gridCols {
  grid-template-columns: var(--grid-columns);
}

.gridRowsDense {
  grid-auto-flow: column dense;
}

.gridRows,
[class*="gridRows"] {
  grid-auto-flow: column;
}

.gridRows2 {
  grid-template-rows: repeat(2, 1fr);
}

.gridRows3 {
  grid-template-rows: repeat(3, 1fr);
}

.gridRows4 {
  grid-template-rows: repeat(4, 1fr);
}

.gridRows5 {
  grid-template-rows: repeat(5, 1fr);
}

.gridRows6 {
  grid-template-rows: repeat(6, 1fr);
}

.gridRows7 {
  grid-template-rows: repeat(7, 1fr);
}

.gridRows8 {
  grid-template-rows: repeat(8, 1fr);
}

.gridRows {
  grid-template-rows: var(--grid-rows);
}

.Grid > * {
  grid-column: var(--grid-column);
  grid-row: var(--grid-row);
}

.gridRowSpan2 {
  grid-row: span 2;
}

.gridRowSpan3 {
  grid-row: span 3;
}

.gridRowSpan4 {
  grid-row: span 4;
}

.gridRowSpan5 {
  grid-row: span 5;
}

.gridRowSpan6 {
  grid-row: span 6;
}

.gridRowSpan7 {
  grid-row: span 7;
}

.grid-row-span {
  grid-row: var(--grid-row);
}

.gridColSpan2 {
  grid-column: span 2;
}

.gridColSpan3 {
  grid-column: span 3;
}

.gridColSpan4 {
  grid-column: span 4;
}

.gridColSpan5 {
  grid-column: span 5;
}

.gridColSpan6 {
  grid-column: span 6;
}

.gridColSpan7 {
  grid-column: span 7;
}

.gridColSpan {
  grid-column: var(--grid-column);
}