How to make extra card centered

Question

At first, I am sorry, plz pardon me. I am very bad at English as it is not my first language. Probably that's why I didn't find any solution.

I am making a responsive card group with 5 cards. For a large screen, I want to fit 4 cards in a row and the extra card will be centered in the next row. For mid-screen 3 cards will be in a row and 2 extra cards will be centered in the next row.

I can do this.

But I want to do this

My attempt:

.skills-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;}

.card {
width: calc(25% - 20px);
background: blue;
color: white;
text-align: center;
border-radius: 6px;
padding: 20px 25px;
transition: all 0.5s ease;}


          <div class="skills-content">
                <div class="card">
                    <div class="box">
                        <i class="fab fa-html5"></i>
                        <div class="text">HTML</div>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <i class="fab fa-css3-alt"></i>
                        <div class="text">CSS</div>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <i class="fab fa-js"></i>
                        <div class="text">JavaScript</div>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <i class="fab fa-node"></i>
                        <div class="text">NodeJs</div>
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <i class="fab fa-node"></i>
                        <div class="text">NodeJs</div>
                    </div>
                </div>
            </div>

Have you tried [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)? — tomerpacific, Oct 31 '21 at 07:42
@tomerpacific I think Flex would be more appropriate here since the 5th box is clearly not grid-aligned. — Niet the Dark Absol, Oct 31 '21 at 07:42
Okay but what code have you used? Because flexbox *is* the correct way to do this, but without seeing your current attempt I can't even begin to help you fix it. — Niet the Dark Absol, Oct 31 '21 at 07:45

score 1 · Accepted Answer · answered Oct 31 '21 at 07:45

Use flexbox for that:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 180px;
  height: 180px;
  background: cornflowerblue;
  border: green solid 2px;
}

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

Open it in "full page" mode, then resize the browser to see the effect.

How to make extra card centered

1 Answers1