@juiceboxes/juice-grid/juice-grid.css

A lightweight, simple, grid system using CSS Grid OR flexbox

.grid .row:last-of-type, .grid-flex .row:last-of-type {
  margin-bottom: 15px; }

.grid .row > *, .grid-flex .row > * {
  display: block;
  padding: 10px; }

.grid {
  display: grid;
  margin: 0 auto; }
  .grid.with-gutters {
    grid-gap: 15px; }
  .grid .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 15px; }
  .grid .push-1 {
    grid-column-start: 2; }
  .grid .col-1 {
    grid-column-end: span 1; }
  .grid .push-2 {
    grid-column-start: 3; }
  .grid .col-2 {
    grid-column-end: span 2; }
  .grid .push-3 {
    grid-column-start: 4; }
  .grid .col-3 {
    grid-column-end: span 3; }
  .grid .push-4 {
    grid-column-start: 5; }
  .grid .col-4 {
    grid-column-end: span 4; }
  .grid .push-5 {
    grid-column-start: 6; }
  .grid .col-5 {
    grid-column-end: span 5; }
  .grid .push-6 {
    grid-column-start: 7; }
  .grid .col-6 {
    grid-column-end: span 6; }
  .grid .push-7 {
    grid-column-start: 8; }
  .grid .col-7 {
    grid-column-end: span 7; }
  .grid .push-8 {
    grid-column-start: 9; }
  .grid .col-8 {
    grid-column-end: span 8; }
  .grid .push-9 {
    grid-column-start: 10; }
  .grid .col-9 {
    grid-column-end: span 9; }
  .grid .push-10 {
    grid-column-start: 11; }
  .grid .col-10 {
    grid-column-end: span 10; }
  .grid .push-11 {
    grid-column-start: 12; }
  .grid .col-11 {
    grid-column-end: span 11; }
  .grid .push-12 {
    grid-column-start: 13; }
  .grid .col-12 {
    grid-column-end: span 12; }

.grid-flex.with-gutters .col + .col {
  margin-left: 15px; }

.grid-flex .row {
  display: flex;
  width: 100%; }
  .grid-flex .row .col {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1; }