Facing problem in displaying service data into grid

I am working on Angular project where I am facing problem in displaying data
Facing problem in displaying data coming from service into two rows dynamically
just like bootstrap grid view
eg:

 <div class="row">
    <div class="col-mg-*"></div>
    <div class="col-*-*"></div>
  </div>

I am putting my html code below –

                <div class="container" *ngFor="let match of upcommingMatch; let i = index">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="match_section">
                        <h3>{{match.tournamentName}}</h3>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                              <div class="country_image">
                                <img src="{{match.team1PhotoUrl}}"/>
                              </div>
                              <p class="country_name">{{match.team1Name}}</p>
                            </div>
                            <div class="col-md-4">
                              <div class="vs">
                                <img src="../../assets/imgs/vs.png"/>
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="country_image">
                                <img src="{{match.team1PhotoUrl}}" />
                              </div>
                              <p class="country_name">{{match.team2Name}}</p>
                            </div>
                          </div>
                          <p class="time">67h  59m  13s</p>
                          <a>Join</a>
                      </div>
                    </div>

more Info : I am using Angular Material design

I want data just like displayed in below Image

enter image description here

But right now it is displayed like below

enter image description here (.html part)

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.