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

Question

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:

I want to display data in columns and extra column will automatically get added if data increases.
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)
One column might contain multiple small size columns.
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:

Developer · Accepted Answer · 2022-11-17 09:31:31Z

1

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

answered Nov 17, 2022 at 9:31

Developer

343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay Paghdar Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

maazadeeb · Accepted Answer · 2019-07-15 06:39:28Z

0

Firstly, bootstrap expects you to divide your layout into 12 columns. Your current DOM uses 28 columns (4 * 7). It'll probably behave weirdly in the UI.

You just need to think in terms of rows and columns, the way bootstrap does. Here is a sample structure trying to mimic your screenshot. You need to alter the col-md-* as per your needs.

div {
  background: lightblue;
  border: 1px solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2
      <div class="row">1</div>
      <div class="row">2</div>
      <div class="row">3</div>
    </div>
    <div class="col">
      3
      <div class="row">1</div>
      <div class="row">2</div>
      <div class="row">3</div>
      <div class="row">4</div>
    </div>
  </div>
</div>

answered Jul 15, 2019 at 6:39

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

2 Comments

Mayuri S Kulkarni Over a year ago

Yes, but problem is that I am not doing this code manually. I'm forming this in the .map function of array and I need to decide column content as per the height of the mega menu.

maazadeeb Over a year ago

Then please share the code relevant to your problem.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related