censa_front_end_library/css/src/utils/grid.css

React components library project for censa Design System

.Row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 100%;
}

.Col {
  position: relative;
  box-sizing: border-box;
  flex: 1 0 0%;
}

.Col--auto {
  flex: 0 0 auto;
  width: auto;
}

.Col--1 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 1);
}

.Col--2 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 2);
}

.Col--3 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 3);
}

.Col--4 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 4);
}

.Col--5 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 5);
}

.Col--6 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 6);
}

.Col--7 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 7);
}

.Col--8 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 8);
}

.Col--9 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 9);
}

.Col--10 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 10);
}

.Col--11 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 11);
}

.Col--12 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 12);
}

/* if the viewport is between 0 to 575 pixels wide. */

@media (max-width: 575px) {
  .Col--xs-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--xs-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--xs-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--xs-3 {
    flex: 0 0 auto;
  }
  .Col--xs-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--xs-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--xs-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--xs-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--xs-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--xs-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--xs-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--xs-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--xs-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is between 576 and 767 pixels wide. */

@media (min-width: 576px) and (max-width: 767px) {
  .Col--s-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--s-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--s-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--s-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--s-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--s-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--s-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--s-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--s-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--s-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--s-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--s-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--s-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is between 768 and 991 pixels wide. */

@media (min-width: 768px) and (max-width: 991px) {
  .Col--m-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--m-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--m-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--m-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--m-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--m-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--m-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--m-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--m-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--m-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--m-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--m-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--m-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is between 992 and 1199 pixels wide. */

@media (min-width: 992px) and (max-width: 1199px) {
  .Col--l-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--l-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--l-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--l-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--l-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--l-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--l-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--l-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--l-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--l-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--l-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--l-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--l-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is 1200 pixels wide or wider. */

@media (min-width: 1200px) {
  .Col--xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--xl-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--xl-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--xl-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--xl-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--xl-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--xl-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--xl-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--xl-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--xl-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--xl-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--xl-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--xl-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}