Question about the Grid / Cell usage

[jamietotten]

1. Is each <Grid> intended to represent a row? In your demos you have one <Grid> and many <Cell>s, however if you test this out, you don't see the behaviour that you are suggesting in the example. For example when you have the example for:

<Grid>
    <Cell size='6/12'>
        Fills Half
    </Cell>
    <Cell>
        Fills Rest.. (Yay for Flexbox)
    </Cell>
    <Cell size={200} lap={150}>
        Fills 150px on lap and 200px everywhere else
    </Cell>

You end up with all 3 cells in the first row and the remaining ones staggered in distribution. I am just wondering because when I read "Fills rest" I'm assuming it would fill the rest of the available space. Instead you get an additional cell in the row of 150px (lap).

2. I'm also trying to understand the -11px margin left/right gutter on the <Grid> element. Is the intension that the outer <Grid> is wrapped in a .container with an 11px padding left/right?

Any insight is appreciated.
Jamie

[danieljuhl]

1. The example is more like an example of the total possibilities. And it's actually working as expected. First cell is 50% and third cell is 150px/200px. The fourth is 50% again, so it will end on the second row no matter what, it leaves the "rest" for the second cell. Make sense? Flexbox will respect all the sizes given and distribute the rest per row for those without a size.

2. Admittet, the gutter is not flexible at the moment, which it probably should be. Each <Cell /> has padding: 0 11px to create white-space between cells. To ensure the first and last cell starts and ends at the parent containers left and right a negative margin is added to the <Grid />

[jamietotten]

1. Totally makes sense, that's kind of what I was suspecting. So essentially to control a row, use a <Grid /> or expect all <Cell />s to be flexible within the outer-most <Grid /> like your demo

2. I see that <Grid /> and <Cell /> both have a gutter override property, but that the gutter override on <Grid /> overrules the <Cell /> but I assume you're suggesting that the overall gutter should have be setting. That would be definitely be the best option, perhaps a global <Grid /> and <Cell /> override setting...?

Thanks for your reply.