@barguide/style-guide/src/ui/grid.css

BarGuide.io | CSS Style Guide

.ui-grid {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr;
  justify-content: space-between;
}

.ui-grid-item {
  width: 100%;
}

@screen sm {
  .ui-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@screen lg {
  .ui-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@screen xl {
  .ui-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@screen 2xl {
  .ui-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 2000px) {
  .ui-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 2500px) {
  .ui-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}