Autoclipping multi-line flexbox-CodePudding

I need to show 8-9 cards in a nice table with 2-4 rows and 2-4 elements per row. All rows have the same amount of elements.

I.e. depending on width of container element user should see ether 8 or 9 cards:

C1 C2 C3 C4
C5 C6 C7 C8

C1 C2 C3
C4 C5 C6
C7 C8 C9

C1 C2
C3 C4
C5 C6
C7 C8

How can I do it with out media queries?

The most natural way seems to be flexbox with flex-wrap: wrap, but how to explain flexbox that I need to hide a row if it contains only 1 element? Are there css only solution? Can I detect with javascript how many lines a wrapping flexbox has?

CodePudding user response：

Flexbox combined with flex-wrap: wrap and media-queries can be a good solution for this.

You can set up several breakpoints and create a different behavior for different screen sizes. That can be (apart from setting flex-basis) also hiding the last element with display: none

With mobile-first approach you could do it for example like this:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper div {
  flex-basis: 50%;
}
.wrapper div:last-child {
  display: none;
}
@media (min-width: 600px) {
  .wrapper div {
    flex-basis: 33.33%;
  }
  .wrapper div:last-child {
    display: block;
  }
}
@media (min-width: 992px) {
  .wrapper div {
    flex-basis: 25%;
  }
  .wrapper div:last-child {
    display: none;
  }
}

<div >
  <div>C1</div>
  <div>C2</div>
  <div>C3</div>
  <div>C4</div>
  <div>C5</div>
  <div>C6</div>
  <div>C7</div>
  <div>C8</div>
  <div>C9</div>
</div>

CodePudding user response：

Since you decide to observe the row count in JavaScrpt, the layout is easy to accomplish with javascript (whatever, you will finally use JavaScript so I think that is not worthy to be galling). If not, use a media query to control the display of elements, and use grid instead of flexbox, in this way:

Document structure:

.container
  #card1.card
  #card2.card
  ...
  #card8.card
  #card9.card

.container{
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
@media all and (min-width: 600px){
  .container{
    grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
  }
  .card:last-child{
    display: none;
  }
}

and so on for others...