css-grid 2x2 or 2x3 layout, depending on number of items

Question

Consider a schedule with a variable number of items, anywhere between 1 and 6. If there are 1 - 4 items, they should cover a 2x2 layout, like:

ONE   TWO
THREE FOUR

If there are 5 - 6 items, they should cover a 2x3 layout, like:

ONE  TWO  THREE
FOUR FIVE SIX

Codepen Link

However I need to programmatically apply the x22 or x23 classes to items, depending on the number of items. I would prefer a solution that does not require additional logic in my template.

.grid {
  border: 1px solid gray;
  width: 400px;
  height: 200px;
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 50%);
  overflow: hidden;
}

.grid .x22,
.grid .x23 {
  background-color: #1c1c1c;
  color: white;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.grid .x22 {
  grid-column: span 3;
}

.grid .x23 {
  grid-column: span 2;
}

<h2>2x3</h2>
<div class="grid">
  <div class="x23">first</div>
  <div class="x23">second</div>
  <div class="x23">third</div>
  <div class="x23">fourth</div>
  <div class="x23">fifth</div>
  <div class="x23">sixth</div>
</div>
<h2>2x2</h2>
<div class="grid">
  <div class="x22">first</div>
  <div class="x22">second</div>
  <div class="x22">third</div>
  <div class="x22">fourth</div>
</div>

Answer 1

Without using Javascript you could achieve this behaviour in pure CSS with Flexbox and a couple of quantity queries to know how many children you have.

Codepen demo

---

Markup

<section>
  <div>1</div>
  ...
  <div>6</div>
</section>

<section>
  <div>1</div>
  ...
  <div>5</div>
</section>


<section>
  <div>1</div>
  ...
  <div>4</div>
</section>

CSS

section {
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }


/* by default assign flex-basis to 49.75% (2 boxes per row) 
 * the gap between box is .5%
 */

div { 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 49.75%;
  margin-bottom: .5%;  }

/* if parent element contains at maximum 5 or 6 children we set their
 * flex-basis to 33% (3 boxes per row, gap is still .5%)
 */

div:nth-last-child(n+5):first-child,
div:nth-last-child(n+5):first-child ~ *,
div:nth-last-child(n+6):first-child,
div:nth-last-child(n+6):first-child ~ * {
  flex-basis: 33%; }


/* since we're setting space-around to `justify-content` we need to
 * remove the extra space on the last row when we have exactly 5 
 * children, by adjusting the margin on the last child  
 */ 
div:nth-child(5):last-child {
  margin-right: auto;
  margin-left: .5%; } 

---

Final Result