0

I want to place the maps in grid system from the backend I have placed the maps but coming in vertical way.

But My requirement is based on the data (i.e no of maps) it has to adjust the grids

for ex. if the maps are two it has to show two maps one by one, if it has 4 it has to show two maps in first row and two maps in second row and so on in bootstrap grid system.

.component.html

<div *ngFor="let x of data ; let i =index">

    <div class="container">
      <div class="row no-gutters">
      <div class="col-sm-5">
       
        <div id="x{{i}}"  ng-onload="mulmaps(x{{i}});" style="height: 300px;"></div>

      </div>

    </div>
  </div>
Haritha
  • 77
  • 2
  • 10

1 Answers1

0

By not using .container, .row or .col in your loop, but use a card layout like .card-deck.

Since .card-deck is a flex container, the width of the children is now under your control with flex-grow, -shrink and -basis.

<div class="card-deck">
    <div class="card">...</div>
    <!-- ... repeat n times depending on your data -->
</div>

With CSS media queries you can cover the width of the cards even more simply by changing flex-basis.

DEMO

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • Thanks@ Tim Vermaelen ,but I want to show the map in a row based on the odd and even number of columns(maps) from the backend .If the maps(columns are 1 show single row, if the columns are two show the two maps in the row if the columns are three place two maps in first row and third map in second row.I have stucked here can you please help for my requirement. – Haritha Jan 18 '21 at 09:52
  • In almost all cases where I had to do something like that, I used a modulus operator => iteratorIndex % 2 === 0 ? startRow startCol else startCol. Repeat the modulus to endRow. – Tim Vermaelen Jan 18 '21 at 10:38
  • I did not get you, can you please edit the above code so that I can use that. – Haritha Jan 18 '21 at 10:49
  • How can I place startRow startCol – Haritha Jan 18 '21 at 11:27
  • Something like this I mean: https://snook.ca/archives/php/the_modulo_oper. Maybe you can still get away with card-deck and use nth selector in CSS \o/ – Tim Vermaelen Jan 18 '21 at 13:02