How to align cards in html?

Question

i have a container which contain some cards, I want each card to start at left border of container and end at right border , like the below code.

<html>
<style>
  .container {
    display: flex;
    justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
  }
   .card{
 border:1px solid black;
}
</style>

<body>
  <div class="container">
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
    <div class="card">
      <h2>I'm a card</h2>
    </div>
  </div>
</body>

</html>

but last 2 elements have too much space between them, how can I remove it??

I have tried adding margin-left/right to behave like I want but the corner cards don't touch the border. any help??

Edit: here is what i expect and

and what I get

@Dark_thunder I have tried your code in editior [http://jsfiddle.net/gaurav1330/q32oLat1/2/](http://jsfiddle.net/gaurav1330/q32oLat1/2/) have a look. To verify I have added border to each card. It is working fine with above uploaded code. — Gaurav, Nov 02 '18 at 07:25
This looks fine to me. If you have issues with spacing, perhaps let us know what screen resolution you are using that produces the problem. — alexytsu, Nov 02 '18 at 07:30
wait sorry guys, I din't add `flex-wrap:wrap` , please check the issue now — Dark_thunder, Nov 02 '18 at 07:31
@Dark_thunder As badministrator said specify your screen size where you are having problem. You can check updated url [link](http://jsfiddle.net/gaurav1330/q32oLat1/5/) — Gaurav, Nov 02 '18 at 07:51
What is your desired result? Do you want the elements on the last row to be wider or align differently? Please give an example. — Arleigh Hix, Nov 02 '18 at 08:10

Ramesh · Accepted Answer · 2018-11-02T13:15:36.627

This is because of the behavior of justify-content: space-between. Learn about the behavior of justify-content visit here

To achieve what you wanted you can set the container as block element and set the children to be floated like float:left.

To avoid the unwanted spaces I removed the margin-left of the .card:first-child and margin-right of the .card:last-child

You can specifically set the number of card content per a row by setting a common width and clearing the margin space for nth-child.Currently I made this code for 5 elements per row

.container {
  display: block;
  width: 100%;
}

.card {
  border: 1px solid black;
  float: left;
  margin: 1px;
  padding: 10px 3px;
  /*setting width for each and every card element as well as -10px for removing the margin width for 5 elements*/
  width: calc( 100% / 5 - 10px);
}


/*first element*/

.container .card:first-child {
  margin-left: 0;
}


/*last element of the first row*/

.container .card:nth-child(5n) {
  margin-right: 0;
}


/*first-element of the 2nd row*/

.container .card:nth-child(5n+1) {
  margin-left: 0;
}


/*last element*/

.container .card:last-child {
  margin-right: 0;
}

<div class="container">
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
  <div class="card">
    <h2>I'm a card</h2>
  </div>
</div>

The first and sixth card are not aligned, that is why I did not use margin. — Dark_thunder, Nov 02 '18 at 10:07
Let me know how many elements that you want in a row @Dark_thunder — Ramesh, Nov 02 '18 at 10:09
@Dark_thunder Look at the edited answer. I considered as 6 elements per row and I have clear comments on css. — Ramesh, Nov 02 '18 at 10:19
number of elements are unknown for the moment , but now if I add the 8th element ,it should be below the 2nd one and the 6th one should be touching the border of it's parent element as well. — Dark_thunder, Nov 02 '18 at 10:28
@Dark_thunder This is mystery, you may not able to tell the total number of elements, but you must be able to tell the number of element to be placed in a row. Now check the answer. Still I have considered that there are 6 elements in a row. — Ramesh, Nov 02 '18 at 10:57
is it possible to avoid doing selectors?? btw thanks it works — Dark_thunder, Nov 02 '18 at 13:38

score 1 · Answer 2 · answered Nov 02 '18 at 07:49

I'm not quite sure I re-created your problem, but here is a codepen https://codepen.io/salallegra/pen/mQbBea that might help.

<html>
<style>
    .container {
        display: flex;
        justify-content: space-between;
        border-style: solid;
        border-width: 1px;
        border-color: red;
        margin-left: 0px;
        margin-right: 0px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card {
        border-style: solid;
        border-width: 1px;
        border-color: red;

    }

    body {
        margin-left: 0;
        margin-right: 0;
    }
</style>

<body>
    <div class="container">
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
        <div class="card">
            <h2>I'm a card</h2>
        </div>
    </div>
</body>

</html>

I removed the left and right margin of the body and placed borders around all the cards, and the container itself.

I also checked different view port sizes in Chrome developer tools and the spacing looks fine at different sizes.

How to align cards in html?

2 Answers2