Repository navigation
Question about the Grid / Cell usage #12
Description
Activity
-
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.
-
Admittet, the gutter is not flexible at the moment, which it probably should be. Each
<Cell />haspadding: 0 11pxto 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 />
-
-
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 -
I see that
<Grid />and<Cell />both have agutteroverride property, but that thegutteroverride 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.
-
<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: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).
<Grid>element. Is the intension that the outer<Grid>is wrapped in a.containerwith an 11px padding left/right?Any insight is appreciated.
Jamie