Skip to content

Instantly share code, notes, and snippets.

@RussellBishop
Last active September 15, 2023 11:31
Show Gist options
  • Save RussellBishop/4f6ed077878a9c15f76de41c201c4e5d to your computer and use it in GitHub Desktop.
Save RussellBishop/4f6ed077878a9c15f76de41c201c4e5d to your computer and use it in GitHub Desktop.
Container Units 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment