How to display three columns in each row?

user_15208666 0
Viewed 61

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

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"
          class="mb-2"
        />
        <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>

There are 30 products coming from an API, I want them to be organised as three columns in each row.
It shouldn't be bootstrap, I could use any CSS library or even vanilla CSS.

vuejs2 nuxt.js vue.js css
2 Answers

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 class="flexbox-container">
        <div v-for="product in products" :key="product.id" class="product-card">
          <img
            title="Card Title"
            :src="product.images[0]"
            img-alt="Product image"
            img-top
            tag="article"
            style="max-width: 20rem"
            class="custom-image mb-2"
          />
          <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>
user_88165850

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>

user_175604020
Related