Skip to content

Instantly share code, notes, and snippets.

@dangayle
Last active June 24, 2021 22:56
Show Gist options
  • Save dangayle/a74a4cc4f29416784a9d to your computer and use it in GitHub Desktop.
Save dangayle/a74a4cc4f29416784a9d to your computer and use it in GitHub Desktop.
The only css grid you need, based on the golden ratio.
$grid-gutter-width: 30px;
.l-1{
// larger portion of golden ratio
width: calc(#{percentage(1/1.618)} - #{$grid-gutter-width / 2});
}
.l-2{
// Smaller portion of golden ratio
width: calc(#{percentage(1-1/1.618)} - #{$grid-gutter-width / 2});
}
.l-r{
float:right;
}
.l-l{
float:left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment