question about component height

[box-turtle]

I've been looking at a lot of layout grids/systems and this one looks really nice, and it works on IE9 (a requirement for my project).

For building app-style layouts with grids and forms. Is there a recommended way of dealing with components that need to be 100% or 50% height for larger screen sizes, and then assume a fixed height within the flow at smaller sizes.

[skiano]

Im not sure if you mean 100% and 50% relative to the screen or to some parent element.

However, my first thought is that you can do whatever you want depending on the breakpoint. It may not be supported out of the box, but it should be possible.

Observing the breakpoint also doesn't mean you have to have Rows and Columns. So if you just want to know about the breakpoint so that you can choose a height you could do something like this:

HeightThing = observeGrid((props) => {
  if (props.breakpoint < 8) {
    return <div/>;
  } else {
    return <div style={{height: '50%'}}/>
  }
})

Does that address your question?

[box-turtle]

Thanks for the reply - yes I think that will work. Right after I posted I realized I could trigger the height changed based on the breakpoint callback. Still fiddling with the CSS to get the height percentages to work but I think the approach will fit my needs.