CODEWITHSUNDEEP
htmlcss
Muhammad Ammar
Muhammad Ammar

Reputation: 79

How do I add grid in multiple flip cards in html

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.

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.

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.

So I want 5/4 cards in one row.

Also I want to know , How can I add style to the grid applied on the cards

.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);
}
<section id="team">
  <div class="container">
    <div class="section-header wow fadeInUp">
      <h3>Heroes</h3>
      <p><b>HEROES</b> rating according to Meta changes</p>
    </div>


    <div style="width: 100%; text-align: left; padding: 5px 2px; clear: both;"><img alt="" src="img/heroes_thumbnail/heroes_thumbnail_large/strength.PNG" width="100" height="100" loading="lazy" /> Strength </div>
    <div class="row">


      <!-- #str heroes -->
      <!-- #abaddon -->

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;">
          </div>
          <div class="flip-card-back">
            </br>
            <p>WR : 50%</p>
            <p>PR : 50%</p>

          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;">
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;">
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>



      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;">
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

Upvotes: 2

Views: 3162

Answers (1)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

Wrap your cards with div ans style it as follow:

 .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /*grid with 4 columns .. edit the number to change grid columns*/
      justify-items: center;
      align-items: center;
      grid-gap: 15px;
    }

Example: 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 15px;
}

.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);
}
<section id="team">
  <div class="container">
    <div class="grid">
      <!-- #str heroes -->
      <!-- #abaddon -->

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <br />
            <p>WR : 50%</p>
            <p>PR : 50%</p>
          </div>
        </div>
      </div>

      <!-- #alchemist -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #axe -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <!-- #beastm -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
          </div>
          <div class="flip-card-back">
            <h1>Win Rate</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 3

Related Questions