title: How do I add grid in multiple flip cards in html
body: <p>I am trying to tidy my flip-cards that are being placed adjacent to each other.For that I need grid to separate my cards.So that my cards look good when someone is seeing it for the first time.</p>
  
  <p>I have tried out applying grid to my flip-cards, but they are aligning vertically like 120 cards aligning vertically .I don't know what is wrong.</p>
  
  <p>I have just linked the styles relating to the flip card , also since my code is lengthy i have selected only 5 flip cards.So please design considering 40 cards per division.Have divided the cards in 3 sections.</p>
  
  <p>So I want 5/4 cards in one row.</p>
  
  <p>Also I want to know , How can I add style to the grid applied on the cards</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flip-card {
    border-style: hidden;
    background-color: transparent;
    width: 120px;
    height: 120px;
    perspective: 1000px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-card-back {
    background-color: #222e36ef;
    color: white;
    transform: rotateY(180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="team"&gt;
    &lt;div class="container"&gt;
      &lt;div class="section-header wow fadeInUp"&gt;
        &lt;h3&gt;Heroes&lt;/h3&gt;
        &lt;p&gt;&lt;b&gt;HEROES&lt;/b&gt; rating according to Meta changes&lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;div style="width: 100%; text-align: left; padding: 5px 2px; clear: both;"&gt;&lt;img alt="" src="img/heroes_thumbnail/heroes_thumbnail_large/strength.PNG" width="100" height="100" loading="lazy" /&gt; Strength &lt;/div&gt;
      &lt;div class="row"&gt;
  
  
        &lt;!-- #str heroes --&gt;
        &lt;!-- #abaddon --&gt;
  
        &lt;div class="flip-card"&gt;
          &lt;div class="flip-card-inner"&gt;
            &lt;div class="flip-card-front"&gt;
              &lt;img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;"&gt;
            &lt;/div&gt;
            &lt;div class="flip-card-back"&gt;
              &lt;/br&gt;
              &lt;p&gt;WR : 50%&lt;/p&gt;
              &lt;p&gt;PR : 50%&lt;/p&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- #alchemist --&gt;
        &lt;div class="flip-card"&gt;
          &lt;div class="flip-card-inner"&gt;
            &lt;div class="flip-card-front"&gt;
              &lt;img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;"&gt;
            &lt;/div&gt;
            &lt;div class="flip-card-back"&gt;
              &lt;h1&gt;Win Rate&lt;/h1&gt;
              &lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
              &lt;p&gt;We love that guy&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- #axe --&gt;
        &lt;div class="flip-card"&gt;
          &lt;div class="flip-card-inner"&gt;
            &lt;div class="flip-card-front"&gt;
              &lt;img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;"&gt;
            &lt;/div&gt;
            &lt;div class="flip-card-back"&gt;
              &lt;h1&gt;Win Rate&lt;/h1&gt;
              &lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
              &lt;p&gt;We love that guy&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  
        &lt;!-- #beastm --&gt;
        &lt;div class="flip-card"&gt;
          &lt;div class="flip-card-inner"&gt;
            &lt;div class="flip-card-front"&gt;
              &lt;img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;"&gt;
            &lt;/div&gt;
            &lt;div class="flip-card-back"&gt;
              &lt;h1&gt;Win Rate&lt;/h1&gt;
              &lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
              &lt;p&gt;We love that guy&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>