Gutter example

[Meberem]

Would you be able to add an example (could be with styled-components-spacing) that shows how to add a vertical and horizontal gutter between rows and columns?

[ralphholzmann]

I know that you posted this awhile ago, but I ran into this recently and this is what I came up with:

import React from 'react';
import Grid from 'styled-components-grid';
import { Margin } from 'styled-components-spacing';

const MarginUnit = ({ children, ...props }) => (
  <Grid.Unit {...props}>
    <Margin {...props}>{children}</Margin>
  </Grid.Unit>
);

Then to use it...

<Grid>
  <MarginUnit size={1/2} right={1}>
    Foo
  </MarginUnit>
  <MarginUnit size={1/2} left={1}>
    Bar
  </MarginUnit>
</Grid>

Hope this helps anyone else who runs into this.

[jameslnewell]

@Meberem can you provide more details about your requirements? (I don't normally use a gutter)

What @ralphholzmann has mentioned could definitely work, otherwise you could use mixins e.g.

import styled from 'styled-components';
import {grid} from 'styled-components-grid';
import {pt, pr} from 'styled-components-spacing';

const GutterGrid = styled`
  ${grid()}
`;

const GutterGridUnit = styled`
  ${pt(1)}
  ${pr(1)}
  ${grid.unit({size: 1/12)}
`;

<GutterGrid>
  <GutterGridUnit>
   1/2
  </GutterGridUnit>
</GutterGrid>

Alternatively the new CSS grid spec might be a good fit too.

[Meberem]

Hey both, thanks for your help just wracking my brain to remember what I was doing for this.
I believe the plan was to have a grid that was a least 4 items wide with some spacing between them and a margin around the whole grid. I can't remember the details too much but I think I just added a margin left and right to each element and a negative margin to the container.
It was supposed to look a little like:

from http://gutter-grid.net/