Skip to content

Instantly share code, notes, and snippets.

@equinusocio

equinusocio/flex-grid.css

Last active March 24, 2021 09:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save equinusocio/588a829058dee84783ed857c8f5ffde4 to your computer and use it in GitHub Desktop.
Save equinusocio/588a829058dee84783ed857c8f5ffde4 to your computer and use it in GitHub Desktop.
Download ZIP
emulated grid using flex and gaps
Raw
flex-grid.css
body {
margin: 0;
}
.FlexGrid {
--gap: 12px;
display: inline-flex;
flex-wrap: wrap;
margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
width: calc(100% + var(--gap));
}
.FlexGrid > * {
margin: var(--gap) 0 0 var(--gap);
flex-grow: 1;
min-width: 6rem;
height: 6rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment