I have a CSS like this.
I want to dynamically change the position of the cards to the center or right justified according to the number of elements of the card:
.section {
display: flex;
flex-wrap: wrap;
background-color: #ffabaf;
max-width: 80vw;
}
.card {
width: 90px;
height: 90px;
background-color: #afafbb;
border: 3px solid;
}
<div class="section">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
For example, when the number of card elements is 3 or less, I want to center the elements like this:
.section {
display: flex;
flex-wrap: wrap;
background-color: #ffabaf;
max-width: 80vw;
justify-content: center;
}
.card {
width: 90px;
height: 90px;
background-color: #afafbb;
border: 3px solid;
}
<div class="section">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
And when the number of card elements is 4 or more, I want to align the elements to the left or right like this:
.section {
display: flex;
flex-wrap: wrap;
background-color: #ffabaf;
max-width: 80vw;
/* justify-content: left; OR*/
justify-content: right;
}
.card {
width: 90px;
height: 90px;
background-color: #afafbb;
border: 3px solid;
}
<div class="section">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
I tried to achieve these using Flex, Grid, but I could not. Is it possible to achieve the operations described above using CSS, Flexbox or Grid Layout?