Flexbox margins between elements and zero margins to parent wrapper

Question

Codesandbox example: https://codesandbox.io/embed/silly-firefly-87cov

We have random number of element inside parent. Elements position themselfs as it fit using flexbox.

Problem: how to do margins only between elements and not with parent?

Answer 1

I'd like to share a CSS Grid solution with you. We can use grid-gap to specify the spacing between the children themselves. This allows us to remove margin and focus on a more declarative layout from the parent element.

const Parent = styled.div`
  display: grid;
  grid-auto-rows: 300px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 5px;
`;

const Element = styled.div`
  background-color: black;
  border: 1px solid green;
  color: white;
`;

CodeSandbox