Grommet: v2 Sticky Footer with Grid Layout

[webdeb]

Expected Behavior

When using the Grid with rows={['xsmall', 'flex', 'xsmall']} the row in the middle (main/content) should stretch, so the footer will be set to the bottom.

For this the <Grommet /> Component and its parents (body / div#root) must have the style property height: 100%

Actual Behavior

height: 100% is not set to the Grommet Component, so the Grid Layout cannot take the whole space, and flex is not working properly.

Possible solutions

1. apply the missing style manually

Before using Grommet in your App, extend it

const FullHeightGrommet = styled(Grommet)`
  height: 100%;
`;

const App = () => <FullHeightGrommet>
   <Grid rows={["flex", "xsmall"]}>
     <Box />
     <Box />
   </Grid>
</FullHeightGrommet>

2. Fix in Grommet directly

I would like to provide a PR for this, but I am not sure, what the best option here might be, set it directly or provide a prop like stretch. For now, I am ok with the custom solution, but I thought it might be good to mention it here.

[ericsoderberghp]

Thanks for being willing to contribute. I could see two approaches to this:

1) Wrap the Grid in a <Box full={true}>.
2) Change the height: 100%; in StyledGrid to be height: 100vh. The thinking here being that Grid is primarily designed to be used for full page layout.

I think #2 is a bit more compact and probably a good approach most of the time. But, it seems slightly two opinionated to me, as it would prevent Grid from being used within other layout components.

What do you think of #1?

[webdeb]

@ericsoderberghp sorry maybe I am misunderstanding something, because CSS is not my strength at all. I think, that the main problem is with the Grommet component, which does not take the whole vertical space. If we put another layer like a Box inside the Grommet component, it will not take the whole space either, because of the Grommet component, which only takes what it needs.

So maybe a simple prop like fullHeight in <Grommet fullHeight /> would be enough?

[ericsoderberghp]

This can be accomplished now with <Grommet full={true}>.