Search code examples
cssreactjsbootstrap-4

Grid to display columns as per the specified height using bootstrap in React app

I am displaying a mega menu dynamically and for this I want to create a grid as per the requirement. Here the some points to consider:

  1. I want to display data in columns and extra column will automatically get added if data increases.
  2. Height of the mega menu will be fixed e.g. 300px and column data will get added as per the mega menu height and column content. (If that much of space not available then that div will create another column automatically)
  3. One column might contain multiple small size columns.
  4. Data will get displayed in columns automatically using json.

I tried row column structure of bootstrap, but data get displayed horizontally as per the row and I want data vertically as per the columns.

I'm creating like this structure dynamically using .map on array

<div className="row">
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
  <div className="col-md-4"></div>
</div>

For more details:

enter image description here

Solution

  • Try with the flexbox, will help you to get result. Here is the link.