Поля Flexbox между элементами и нулевые поля для родительской оболочки

Я хотел бы поделиться с вами решением CSS Grid. Мы можем использовать grid-gap, чтобы указать расстояние между самими дочерними элементами. Это позволяет нам удалить margin и сосредоточиться на более декларативном макете родительского элемента.

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;
`;

КодПесочница