Skip to content

Instantly share code, notes, and snippets.

@bohman
Last active March 17, 2021 14:03
Show Gist options
  • Save bohman/c0b6de16ca43c243d3107d9dd2f3b014 to your computer and use it in GitHub Desktop.
Save bohman/c0b6de16ca43c243d3107d9dd2f3b014 to your computer and use it in GitHub Desktop.
Simple flexbox columns with css variables. There are a few gotchas since we ensure alignment with negative margin-bottom and margin-left instead of nth-child, but all in all it works pretty well.
[class*=columns-] {
--columns: 2;
--columns-gutter: 40px;
--columns-width: calc(100% / var(--columns) - var(--columns-gutter));
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
margin-bottom: calc(var(--columns-gutter) * -1);
margin-left: calc(var(--columns-gutter) * -1);
> * {
flex-grow: 0;
flex-shrink: 0;
flex-basis: var(--columns-width);
margin-bottom: var(--columns-gutter);
margin-left: var(--columns-gutter);
}
&.columns--no-gutter {
--columns-gutter: 0;
}
&.columns--align-bottom {
align-items: flex-end;
}
&.columns--align-center {
align-items: center;
}
&.columns-3 {
--columns: 3;
}
&.columns-4 {
--columns: 4;
}
&.columns-5 {
--columns: 5;
}
&.columns-6 {
--columns: 6;
}
&.columns-7 {
--columns: 7;
}
&.columns-8 {
--columns: 8;
}
&.columns-9 {
--columns: 9;
}
&.columns-10 {
--columns: 10;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment