I have built the project, but I can't display the data to be three columns in each row. I have tried bootstrap, but I failed

here is my code:

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Lab Türkiye products</h1>
      <div v-for="product in products" :key="product.id">
        <img
          title="Card Title"
          :src="product.images[0]"
          img-alt="Image"
          img-top
          tag="article"
          style="max-width: 20rem"
          
        />
        <h3>{{ product.description }}</h3>
        <h4>{{ product.price }} TL</h4>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    numCols: 3;
    return {
      products: [],
    };
  },
  async fetch() {
    const response = await this.$axios.$get("https://dummyjson.com/products");
    this.products = response.products;
  },
};
</script>
<style>
h1 {
  bottom: 57px;
  width: 500px;
  margin: 10px 10px 10px 410px;
  margin: 10 20 30 10;
  text-align: center;
  color: yellowgreen;
}
</style>

so there are 30 products coming from the API, i want them to organize as three columns in each row it shouldn't be bootstrap it could be any CSS library or pure css

CodePudding user response：

Something like this will handle 3 different viewports and has no dependency, regular lightweight CSS.

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Lab Türkiye products</h1>
      <section >
        <div v-for="product in products" :key="product.id" >
          <img
            title="Card Title"
            :src="product.images[0]"
            img-alt="Product image"
            img-top
            tag="article"
            style="max-width: 20rem"
            
          />
          <h3>{{ product.description }}</h3>
          <h4>{{ product.price }} TL</h4>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    }
  },
  async fetch() {
    const response = await this.$axios.$get('https://dummyjson.com/products')
    this.products = response.products
  },
}
</script>

<style scoped>
.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.custom-image {
  max-height: 20rem;
  width: 100%;
  object-fit: contain;
}

.product-card h3 {
  width: 100%;
  text-align: center;
  margin: 0.5rem auto;
}

h1 {
  text-align: center;
  color: yellowgreen;
}

@media only screen and (min-width: 768px) {
  .product-card {
    width: calc(50% - 2rem);
  }
  .custom-image {
    max-height: 7rem;
  }
  .product-card h3 {
    width: 50%;
    margin: 1rem 2rem;
  }
}

@media only screen and (min-width: 1280px) {
  .product-card {
    width: calc(33% - 2rem);
  }
}
</style>

CodePudding user response：

I propose you pure CSS solution :

Styling your container where you generate your divs and apply the following property :

display : inline-grid

Then use grid-template-columns: 33% 33% 33% to set the number of column to 3. Here 33% is a totally arbitrary value, this is the width of the column.

If you want 4 divs per line you set grid-template-columns: 25% 25% 25% 25%,

If you want 5 divs per line you set grid-template-columns: 20% 20% 20% 20% 20%, etc...

But I suggest to you use px instead of % as I have done in the below snippet.

Check this article for more information.

function createDiv(){

const div = document.createElement("div");
div.classList.add("element");
div.innerHTML = "loreum ipsum loreum ipsum loreum ipsum";
document.getElementById("struct").appendChild(div);
}

function pageScroll() {
    window.scrollBy(0,25);
}

.element{
border : 1px solid black;
width : 120px;
height : 60px;
padding : 5px;
}

#struct{
display: inline-grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: repeat(999,90px);
}

#btn{
font: 1.3em "Arial", sans-serif;
width : 140px;
height : 50px;
position : fixed;
bottom : 15px;
right : 15px;
background-color : white;
border : 1x solid black;
padding : 5px;
}

#btn:hover{
background-color : black;
color : white;
cursor : pointer;
}

<input type="button" onclick="createDiv();pageScroll()" value="Add new div" id="btn">

<div id = "struct">
  <div class = "element">
  loreum ipsum
  loreum ipsum 
  loreum ipsum
  </div>

  <div class = "element">
  loreum ipsum
  loreum ipsum 
  loreum ipsum
  </div>

  <div class = "element">
  loreum ipsum
  loreum ipsum 
  loreum ipsum
  </div>
  
</div>