3

I receive an dynamic amount of items from the backend.

In case it's an odd number of items the first should be the only one in the first row.

All others should be displayed two per each row. Same if it's an even number of items - no single item in any row then.

I strongly think there is some way to do this with CSS only (i would easily solve this with JS but would prefer a CSS approach) i just hadn't been able to find the right combination.

HTML:

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
</div>

CSS:

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}
.col:first-child { // should only hit for an odd amount of items
  flex: 0 0 100%;
}

Codepen

Brian
  • 3,850
  • 3
  • 21
  • 37
mholzer78
  • 305
  • 2
  • 11

1 Answers1

6

Yes, this is possible with the following CSS: 

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%;
}


.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%; // should only hit for an odd amount of items
}
<p>Even</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<p>Odd</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

Also se this related post: Can CSS detect the number of children an element has?

larsmagnus
  • 509
  • 2
  • 10