Building Robust Layouts With Container Units

README.md

Building Robust Layouts With Container Units

https://www.smashingmagazine.com/2019/03/robust-layouts-container-units-css/

Demo

https://russellbishop.co.uk/container-units/

container-units-css-fuctions.scss

@function columns($i) {
  @return calc(#{$i} * var(--column-unit));
}

@function gutters($i) {
  @return calc(#{$i} * var(--gutter-unit));
}

@function column-spans($i) {
  @return calc(#{$i} * var(--column-and-gutter-unit) - var(--gutter-unit));
}

@function gutter-spans($i) {
  @return calc(#{$i} * var(--column-and-gutter-unit) - var(--column-unit));
}

@function mix-units($columns, $gutters: $columns) {
  @return calc((#{$columns} * var(--column-unit)) + (#{$gutters} * var(--gutter-unit)));
}

container-units-css.css

:root {
  // Grid proportions
  --grid-width: 960;
  --grid-column-width: 60;
  --grid-columns: 12;

  // Grid logic
  --grid-gutters: calc(var(--grid-columns) - 1);

  // Grid proportion logic
  --column-proportion: calc(var(--grid-column-width) / var(--grid-width));
  --gutter-proportion: calc((1 - (var(--grid-columns) * var(--column-proportion))) / var(--grid-gutters));

  // Container Units
  --column-unit: calc(var(--column-proportion) * var(--container-width));
  --gutter-unit: calc(var(--gutter-proportion) * var(--container-width));
  --column-and-gutter-unit: calc(var(--column-unit) + var(--gutter-unit));

  // Container Width
  --container-width: 80vw;
}

@media (min-width: 1000px) {
  :root {
    --container-width: 90vw;
  }
}

@media (min-width: 1400px) {
  :root {
    --container-width: 1300px;
  }
}