Setting visible on a Grid.Unit sets it to display:flex

[lauriejones]

This forces the grid unit to be flex, and then the <Cell> behaves like an inline-block element and is not longer full width.

<Grid>
  <Grid.Unit visible><Cell>always visible</Cell></Grid.Unit>
</Grid>

https://github.com/jameslnewell/styled-components-grid/blob/master/src/mixins/gridUnit.js#L48

I am still using version 1 but I think it looks like it would still happen in v2.

[jameslnewell]

Yeah 😬any ideas how to fix so it'll work for cases like <Grid.Unit visible={{tablet: false, desktop: true}}/>?

[jameslnewell]

Will display: unset work? https://codepen.io/jameslnewell/pen/oyMoob

[lauriejones]

Does work – but not for IE11. Do you care about that?

Also, are you supporting Grid.Units being display:flex; for those times where you need to make a child of a grid unit full height?

Because if not, can't you just set visible to the default for a div, display: block;?

[jameslnewell]

Does work – but not for IE11. Do you care about that?

Not personally no... do you? 😁

Also, are you supporting Grid.Units being display:flex; for those times where you need to make a child of a grid unit full height?

There's no prop to switch a grid unit to display: flex, but there's nothing stopping someone using the mixins and setting display to flex. And in this case even unset would break whatever they had right?

Suggestions?

[lauriejones]

You could have a bunch of min/max queries for it? And only set display: none for the breakpoints required.

So for this example<Grid.Unit visible={{tablet: false, desktop: true}}/> you'd have:

@media (min-width: 'tablet') and (max-width: 'desktop') {
  display: none;
}

So we don't set anything for the breakpoints where visible !== false.

It's going against mobile-first principles, but might work 😅