Equal width and height cell in react-bootstrap Grid

Question

I'm trying to make the div cells in react-bootstrap Grid have automatically equal width and height. The content size of these cells will vary and so will the width of the entire grid. The goal is to make it responsive and independent of the size of the cell contents.

Also, I am thinking about using something modern like FlexBox layout for React to achieve this (if it exists). I used FlexBox before and I know it's probably the best for achieving layouts like this.

import { Grid, Row, Col } from 'react-bootstrap';

...

<Grid fluid={true}>
    <Row className="show-grid" style={{border: "1px solid brown"}}>
        {dummyData.map(function(object, i){
            return <Col key={i} sm={6} md={3} style={{border: "1px solid yellow"}}>
                <div style={{width:"100%", height:"100%, border: "1px solid blue", backgroundImage:"url("+dummyData[i].url+")"}}>{dummyData[i].city}</div>
            </Col>;
        })}
    </Row>
</Grid>

score 3 · Accepted Answer · answered Oct 15 '16 at 18:17

The solution was to use a React component that sets height to width passed as a prop.

import React from 'react';
import Dimensions from 'react-dimensions';

class Square extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div
                style={{
                    width:this.props.containerWidth,
                }}>
                {this.props.city}
            </div>
        );
    }
}

export default Dimensions()(Square) // Enhanced component

Corresponding changes to the Grid:

<Grid fluid={true}>
    <Row className="show-grid" style={{border: "1px solid brown"}}>
        {dummyData.map(function(object, i){
            return <Col key={i} sm={6} md={3} style={{border: "1px solid yellow"}}>
                <Square image={dummyData[i].url} title={dummyData[i].city} value={dummyData[i].value}></Square>
            </Col>;
        })}
    </Row>
</Grid>

Equal width and height cell in react-bootstrap Grid

1 Answers1