How to Show Three Columns Per Row

How can I show three columns per row?

This may be what you are looking for:

http://jsfiddle.net/L4L67/

body>div {  background: #aaa;  display: flex;  flex-wrap: wrap;}
body>div>div {  flex-grow: 1;  width: 33%;  height: 100px;}
body>div>div:nth-child(even) {  background: #23a;}
body>div>div:nth-child(odd) {  background: #49b;}

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

How to display three columns in each row?

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>

How to display 3 items per row in flexbox?

Flex container:

• You probably want to use display: flex not inline-flex.
• Add flex-wrap: wrap to allow wrapping onto multiple lines.
• Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

• flex-basis: 33.333333%
• You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li {  list-style: none;  flex: 0 0 33.333333%;}

<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>

css Display 3 Columns per Row

You have to do a little bit of mathematical operation here. Use a counter variable like $counter to keep track of how many columns are getting printed in each row, and encapsulate every three columns divs with a row div. So your code should be like this:

<?php
$query = "SELECT * FROM DOCUMENTOS where EDUCATIVOS=1";
$result = mysqli_query($conn,$query);

if(mysqli_num_rows($result)){
    $counter = 0;
    echo '<div class="row">';
    while($row=mysqli_fetch_array($result)) {
        if($counter != 0 && $counter % 3 == 0){
            echo '</div><div class="row">';
        }
    ?>
        <div class="col-sm-4 img-portfolio">
            <a href="<?=$row['LINK_DOCUMENTOS'] ?>"">
            <img class="img-responsive img-hover" src="<?=$row['LINK_IMAGEM'] ?>" alt="Sample Image"> </a>
            <h3><?=$row['NOME'] ?></h3>
            <p><?=$row['DESCRICAO'] ?></p>
       </div>

    <?php   
        ++$counter;
    }
    echo '</div>';
}
?>

Responsive layout with 3 items per row on larger screens and 1 item per row on smaller screens

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;

}
        
.item {
background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

        
@media (max-width: 992px) {
    .container {  grid-template-columns: auto;}
}   

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

how to have one big column and three rows where one of the rows is 3 columns in a grid in css

Maybe something like this would work for you if you want to use css grid:

    .grid-container {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       row-gap: 10px;
       text-align: center;
    }
    .full-row {
      grid-column: span 3 / span 3;
      border: dashed red;
    }
    .one-third-row {
      grid-column: span 1 / span 1;
      border: dashed red;
    }

    <div class="grid-container">

    <div class="full-row" id="about_me">
      <p>
        1
      </p>
    </div>

    <div class="one-third-row" id="">
      <p>
        2
      </p>
    </div>

    <div class="one-third-row" id="">
      <p>
        3
      </p>
    </div>

    <div class="one-third-row" id="">
      <p>
        4
      </p>
    </div>
    
    <div class="full-row" id="">
      <p>
        5
      </p>
    </div>

    </div>

---

Related Topics