@spaced-out/ui-design-system/lib/components/Grid/Grid.module.css

Sense UI components library

@value (
  spaceNone,
  spaceMedium,
  spaceLarge
) from '../../styles/variables/_space.css';

.gridRow {
  --grid-repeat-count: 12;
  --repeat-tracks: 1fr;
  display: grid !important;
  grid-template-columns: repeat(var(--grid-repeat-count), var(--repeat-tracks));
  gap: spaceMedium;
  padding: spaceNone spaceLarge;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  grid-column-gap: spaceMedium;
  grid-row-gap: spaceMedium;
  grid-auto-rows: auto;
  box-sizing: border-box;
}

.gridColumn {
  --grid-column-start: auto;
  --grid-column-end: span 1;
  display: flex;
  align-items: center;
  grid-column: var(--grid-column-start) / var(--grid-column-end);
}