Change grid layout depending on number of elements

Question

I have a wrapper that can have 1-5 elements.

I'd like to change the layout in which they're displayed depending on the number of them:

1 element: 1x1, 33.3% width

2 elements: 2x1, 33.3% width

3 elements: 3x1, 33.3% width

4 elements: 2x2, 50% width

5 elements: 3x2, 33.3% width

How can I do this without JavaScript?

This is the Codepen for reference.

body {
  padding: 20px;
}

.wrapper {
  width: 500px;
  padding: 5px 10px;
  margin: 10px 0;
  border: 2px dashed #5f5f5f;
  display: flex;
  flex-wrap: wrap;
}

.element {
  font-family: Helvetica, sans-serif;
  background-color: #ededed;
  flex: 33.3%;
  max-width: 33.3%;
  margin: 10px 0;
}

.wrapper.with-4-elements .element {
  flex: 50%;
  max-width: 50%;
}

.wrapper-with-5-elements .element:nth(4),
.wrapper-with-5-elements .element:nth(5) {
  flex: 50%;
  max-width: 50%;
}


  Element 1



  Element 1
  Element 2



  Element 1
  Element 2
  Element 3



  Element 1
  Element 2
  Element 3
  Element 4



  Element 1
  Element 2
  Element 3
  Element 4
  Element 5

user_8620333 · Answer

You can do it like below using CSS grid:

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}
.element {
  grid-column: span 2;
  height: 20px;
  background: red;
}
/* the case with 4 elements */
.element:first-child:nth-last-child(4),
.element:first-child:nth-last-child(4) ~ *{
  grid-column: span 3;
}

And with flexbox:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid;
  gap: 5px;
  padding: 10px;
  margin: 10px;
}
.element {
  flex: 0 0 calc((100% - 10px)/3); /* 10px = 2 * gap */
  height: 20px;
  background: red;
}
/* the case with 4 elements */
.element:first-child:nth-last-child(4),
.element:first-child:nth-last-child(4) ~ *{
  flex: 0 0 calc((100% - 5px)/2);
}

Change grid layout depending on number of elements

1 Answers