search

mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link

Emulate flex gap for anything #219

Open mhulse opened 3 years ago

mhulse commented 3 years ago

https://coryrylan.com/blog/css-gap-space-with-flexbox

.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}