<Row> and <Col> requires style={{ height: '100%' }}

[diegoarcega]

problem

I am having to add this inline style to the Row and Col in order for my layout to stretch vertically and takes the full height of the area I want.

Isn't there a more elegant way of doing this with this component?

[santosfrancisco]

Hi @diegoarcega, how are you? Analyzing this behavior, I think that the grid should keep each Row with the height of its content. Otherwise, whoever uses Row would have to force the opposite behavior. What you can do is create a styled row using styled-components for example. Something like that:

import { Container, Row as AwesomeRow, Col } from 'react-awesome-styled-grid'
import styled from 'styled-components'

const Row = styled(AwesomeRow)`
  height: 100%;
  // ... more styles here
`
<Container>
  <Row>
    <Col>
      <Form>
        { ... }
      </Form>
    </Col>
  </Row>
</Container>

Makes sense?

[diegoarcega]

I'm alright with doing that, I was just expecting a more elegant way of doing this, maybe pass a props down to Row and Col,

<Container>
  <Row fullHeight>
    <Col fullHeight>
      <Form>
        { ... }
      </Form>
    </Col>
  </Row>
</Container>

Do you think that adding this feature would hurt the essentials of the lib?