title: Equal width and height cell in react-bootstrap Grid
body: <p>I'm trying to make the <code>div</code> cells in <code>react-bootstrap</code> Grid have <strong>automatically equal width and height</strong>. The <strong>content size of these cells will vary</strong> and so will the <strong>width of the entire grid</strong>. The goal is to make it responsive and independent of the size of the cell contents.</p>
  
  <p>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.</p>
  
  <pre><code>import { Grid, Row, Col } from 'react-bootstrap';
  
  ...
  
  &lt;Grid fluid={true}&gt;
      &lt;Row className="show-grid" style={{border: "1px solid brown"}}&gt;
          {dummyData.map(function(object, i){
              return &lt;Col key={i} sm={6} md={3} style={{border: "1px solid yellow"}}&gt;
                  &lt;div style={{width:"100%", height:"100%, border: "1px solid blue", backgroundImage:"url("+dummyData[i].url+")"}}&gt;{dummyData[i].city}&lt;/div&gt;
              &lt;/Col&gt;;
          })}
      &lt;/Row&gt;
  &lt;/Grid&gt;
  </code></pre>