CODEWITHSUNDEEP
javascripthtmlcss
92yo
92yo

Reputation: 568

Cards are not stacking correctly next to each other 3x3

I have 6 cards that i'm fetching from an API and displaying the data dynamically using Javascript. I'm trying to make them stack 3 x 3 next to each other but what i'm getting back is the cards stacking on top of each other.

I tried everything i could think of, with no luck finding my mistake.

Here's my JS code:

list.forEach((item, i) => {
  output += `
  <div class='wrapper'>
  <div class='cards_wrap'>
    <div class='card_item'>
      <div class='card_inner'>

        <div class='card_top'>
        <a href=${list[i].url}>
          <img src=${list[i].thumbnail[0].url} alt=${list[i].name} />
          </a>
        </div>

        <div class='card_bottom'>
          <div class='card_category'>
          <a href=${list[i].url}>
            <h4>${list[i].name}</h4>
            </a>
          </div>

          <div class='card_info'>
          <a href=${list[i].url}>
            <h5>
            ${list[i].branding}
            </h5>
            </a>
          </div>

            </div>
          </div>
        </div>
      </div>         
      `;
});
document.getElementById("output").innerHTML = output;

My Css

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
}

body {
  color: #000;
  font-size: 14px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.wrapper {
  background: #f1f1f1;
  width: 100%;
  margin: 20px auto;
}

.cards_wrap {
  display: flex;
  flex-wrap: wrap;
}

.cards_wrap .card_item {
  width: 25%;
  padding: 10px;
}

.cards_wrap .card_inner {
  background: #fff;
}

.cards_wrap .card_top {
  width: 100%;
  min-height: 225px;
  padding: 10px;
  padding-bottom: 0;
}

.cards_wrap .card_bottom {
  padding: 15px;
}

.cards_wrap .card_bottom .card_category {
  text-transform: uppercase;
  text-align: center;
}

.cards_wrap .card_bottom .card_info {
  padding: 15px;
  margin: 10px 0;
}

.cards_wrap .card_bottom .card_info .title {
  font-size: 18px;
  margin-bottom: 5px;
}

.cards_wrap .card_bottom .card_creator {
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}


@media (max-width: 1024px) {
  .cards_wrap .card_item {
    width: 33.3%;
  }
}

@media (max-width: 768px) {
  .cards_wrap .card_item {
    width: 50%;
  }
}

@media (max-width: 528px) {
  .cards_wrap .card_top {
    height: auto;
  }
  .cards_wrap .card_item {
    width: 100%;
  }
}

HTML

<body>

<div id='output'>
<script src="./script.js"></script>

Upvotes: 0

Views: 78

Answers (1)

Andres Abadia
Andres Abadia

Reputation: 833

It seems, that you are looping through your wrappers. Meaning, that you are replicating multiples wrappers. The only thing you will want to replicate will be your card_items. I updated your js and html and provided a dummy list to create a content to your list. Your css is looking fine.

const list = [{
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}];
let output = "";
list.forEach((item, i) => {
  output += `
    <div class='card_item'>
      <div class='card_inner'>

        <div class='card_top'>
        <a href=${list[i].url}>
          <img src=${list[i].thumbnail[0].url} alt=${list[i].name} />
          </a>
        </div>

        <div class='card_bottom'>
          <div class='card_category'>
          <a href=${list[i].url}>
            <h4>${list[i].name}</h4>
            </a>
          </div>

          <div class='card_info'>
          <a href=${list[i].url}>
            <h5>
            ${list[i].branding}
            </h5>
            </a>
          </div>

            </div>
          </div>
        </div>     
      `;
});
document.querySelector(".cards_wrap").innerHTML = output;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
}

body {
  color: #000;
  font-size: 14px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.wrapper {
  background: #f1f1f1;
  width: 100%;
  margin: 20px auto;
}

.cards_wrap {
  display: flex;
  flex-wrap: wrap;
}

.cards_wrap .card_item {
  width: 25%;
  padding: 10px;
}

.cards_wrap .card_inner {
  background: #fff;
}

.cards_wrap .card_top {
  width: 100%;
  min-height: 225px;
  padding: 10px;
  padding-bottom: 0;
}

.cards_wrap .card_bottom {
  padding: 15px;
}

.cards_wrap .card_bottom .card_category {
  text-transform: uppercase;
  text-align: center;
}

.cards_wrap .card_bottom .card_info {
  padding: 15px;
  margin: 10px 0;
}

.cards_wrap .card_bottom .card_info .title {
  font-size: 18px;
  margin-bottom: 5px;
}

.cards_wrap .card_bottom .card_creator {
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}

@media (max-width: 1024px) {
  .cards_wrap .card_item {
    width: 33.3%;
  }
}

@media (max-width: 768px) {
  .cards_wrap .card_item {
    width: 50%;
  }
}

@media (max-width: 528px) {
  .cards_wrap .card_top {
    height: auto;
  }
  .cards_wrap .card_item {
    width: 100%;
  }
}
<div id='output'>
  <div class="wrapper">
    <div class="cards_wrap">

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

Upvotes: 1

Related Questions