Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.