flex-grid.css

flex-container {
  --gutters: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
flex-container flex-grid {
  height: 100%;
}
flex-container[overflow-hidden] {
  overflow: hidden;
}
flex-container[pad] {
  padding-left: var(--gutters, 1.5rem);
  padding-right: var(--gutters, 1.5rem);
}
@media (min-width: 768px) {
  flex-container[pad=dynamic] {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
@media (min-width: 576px) {
  flex-container {
    max-width: calc(576px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (min-width: 576px) {
  flex-container[limit=sm] {
    max-width: calc(576px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (max-width: 575.98px) {
  flex-container[until=sm] {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  flex-container {
    max-width: calc(768px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (min-width: 768px) {
  flex-container[limit=md] {
    max-width: calc(768px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (max-width: 767.98px) {
  flex-container[until=md] {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  flex-container {
    max-width: calc(992px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (min-width: 992px) {
  flex-container[limit=lg] {
    max-width: calc(992px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (max-width: 991.98px) {
  flex-container[until=lg] {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  flex-container {
    max-width: calc(1200px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (min-width: 1200px) {
  flex-container[limit=xl] {
    max-width: calc(1200px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (max-width: 1199.98px) {
  flex-container[until=xl] {
    max-width: 100%;
  }
}
@media (min-width: 1400px) {
  flex-container {
    max-width: calc(1400px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (min-width: 1400px) {
  flex-container[limit=xxl] {
    max-width: calc(1400px - (var(--gutters, 1.5rem) * 2));
  }
}
@media (max-width: 1399.98px) {
  flex-container[until=xxl] {
    max-width: 100%;
  }
}
flex-container[fluid] {
  max-width: 100%;
}
flex-container[alternate] > :nth-child(even) > :first-child {
  order: 3;
}
flex-container[alternate] > :nth-child(even) > :last-child {
  order: 1;
}

flex-grid {
  --xs: 1;
  --sm: 1;
  --md: 1;
  --xl: 1;
  --xxl: 1;
  --gx: 1;
  --gy: 1;
  --align: stretch;
  --justify: center;
  --direction: row;
  --wrap: wrap;
  --mw: 10ch;
  --unit: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: var(--direction);
  flex-wrap: var(--wrap);
  justify-content: var(--justify);
  align-items: var(--align);
  margin-top: calc(-1 * var(--unit) * var(--gy));
  margin-left: calc(-1 * var(--unit) * var(--gx));
}
flex-grid + flex-grid {
  margin-top: 0;
}
flex-grid > * {
  box-sizing: border-box;
  display: var(--xs-d, "block");
  order: var(--o, 2);
  max-width: var(--w, 100%);
  min-width: var(--mw, 10ch);
  flex: var(--grow, 1) 0 0%;
  align-self: var(--align, "auto");
  margin-top: calc(var(--unit) * var(--gy));
  margin-bottom: 0;
  margin-left: calc(var(--unit) * var(--gx));
  margin-right: 0;
}
flex-grid > *[col] {
  flex: 0 0 auto;
  width: calc(100% / var(--col) - (var(--unit) * var(--gx)));
}
flex-grid[xs] > *, flex-grid[sm] > *, flex-grid[md] > *, flex-grid[lg] > *, flex-grid[xl] > *, flex-grid[xxl] > * {
  flex: 0 0 auto;
}
flex-grid[sm] > *, flex-grid[md] > *, flex-grid[lg] > *, flex-grid[xl] > *, flex-grid[xxl] > * {
  width: calc((100% - (var(--unit) * var(--gx))));
}
flex-grid[xs] > * {
  width: calc((100% / var(--xs, 1)) - (var(--unit) * var(--gx)));
}
@media (min-width: 576px) {
  flex-grid > * {
    display: var(--d-sm, "inherit");
  }
  flex-grid[sm] > * {
    width: calc((100% / var(--sm, 1)) - (var(--unit) * var(--gx)));
  }
}
@media (min-width: 768px) {
  flex-grid > * {
    display: var(--d-md, var(--d-sm, "inherit"));
  }
  flex-grid[md] > * {
    width: calc((100% / var(--md, 1)) - (var(--unit) * var(--gx)));
  }
}
@media (min-width: 992px) {
  flex-grid > * {
    display: var(--d-lg, var(--d-md, var(--d-sm, "inherit")));
  }
  flex-grid[lg] > * {
    width: calc((100% / var(--lg, 1)) - (var(--unit) * var(--gx)));
  }
}
@media (min-width: 1200px) {
  flex-grid > * {
    display: var(--d-xl, var(--d-lg, var(--d-md, var(--d-sm, "inherit"))));
  }
  flex-grid[xl] > * {
    width: calc((100% / var(--xl, 1)) - (var(--unit) * var(--gx)));
  }
}
@media (min-width: 1400px) {
  flex-grid > * {
    display: var(--d-xxl, var(--d-xl, var(--d-lg, var(--d-md, var(--d-sm, "inherit")))));
  }
  flex-grid[xxl] > * {
    width: calc((100% / var(--xxl, 1)) - (var(--unit) * var(--gx)));
  }
}

/*# sourceMappingURL=flex-grid.css.map */