How to set padding left right for dynamic cards in a row-CodePudding

I am developing a e-commerce website I have 3 Card layout sometimes if there is 2 card, I need to set padding left and right dynamically I tried with

justify-content: space-between

but

|Card1|       |Card2|

I want something like this

|Card1|  |Card2|  |Card3|

|Card1|  |Card2|  |Card3|

|Card1|  |Card2|

Here is my code

<div class="card">
  <div class="cardEach>
  </div>
  <div hljs-attr">cardEach>
  </div>
  <div class="cardEach>
  </div>
  <div hljs-attr">cardEach>
  </div>
  <div class="cardEach>
  </div>
</div>

css

.card{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.cardEach {
    width: 31.3%;
    box-sizing: border-box;
}

CodePudding user response：

All you needed to do was remove the justify content.

.card {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cardEach {
    width: 31.3%;
    box-sizing: border-box;
}

    <body>
        <div class="card">
            <div class="cardEach">test</div>
            <div class="cardEach">test</div>
            <div class="cardEach">test</div>
            <div class="cardEach">test</div>
            <div class="cardEach">test</div>
        </div>
    </body>

CodePudding user response：

Use justify-content : start instead. Click here to know more about justify-content.

.card{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
}
.cardEach {
    width: 31.3%;
    box-sizing: border-box;
}

<div class="card">
  <div class="cardEach">
    Card 1
  </div>
  <div class="cardEach">
    Card 2
  </div>
  <div class="cardEach">
    Card 3
  </div>
  <div class="cardEach">
    Card 1
  </div>
  <div class="cardEach">
    Card 2
  </div>
  <div class="cardEach">
    Card 3
  </div>
  <div class="cardEach">
    Card 1
  </div>
  <div class="cardEach">
    Card 2
  </div>
</div>

If you want to manually add padding instead of justify-content, you can use padding on the CSS. Click here to know more about padding.

.card{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.cardEach {
    width: 31.3%;
    box-sizing: border-box;
    padding: 5px;
}

<div class="card">
  <div class="cardEach">
    Card 1
  </div>
  <div class="cardEach">
    Card 2
  </div>
  <div class="cardEach">
    Card 3
  </div>
  <div class="cardEach">
    Card 1
  </div>
  <div class="cardEach">
    Card 2
  </div>
  <div class="cardEach">
    Card 3
  </div>
  <div class="cardEach">
    Card 1
  </div>
  <div class="cardEach">
    Card 2
  </div>
</div>

CodePudding user response：

Just use this one. complete solution for padding left-right for dynamic cards in a row.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .card {
        display: flex;
        justify-content: space-evenly;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="cardEach">test</div>
      <div class="cardEach">test</div>
      <div class="cardEach">test</div>
      <div class="cardEach">test</div>
      <div class="cardEach">test</div>
    </div>
  </body>
</html>