CSS - Separate inner <div>'s into columns depending on viewport-CodePudding

I have the following example HTML:

<div class="vini">
  <!-- div of class "vino" can be 1 or also 100 times rendered, one below another just like this: -->
  <div class="vino">
  <div class="vino">
  <div class="vino">
  <div class="vino">
</div>

I'm trying to achieve the following:

Scenario for PC: All the <div class="vino"> should be somehow adjusted to display always only 3 of these divs in a row (from left to right). Then, in the next row, there should be the next 3 of these divs, and so on until there is no more left.

Scenario for Mobile: All the <div class="vino"> should be visible one below another - make them scrollable from up all the way down until there are no more of these divs to be shown.

I have tried playing around with display: flex CSS property but I was not able to get it done.

Ideally, I would like to get this done via CSS and HTML only (no JS).

Any ideas how shall I do this, please?

Thank you.

CodePudding user response：

The following styles will get you close to what you need.

The .vini styles will make that container, and it's children into flexed items.

The .vino styles will make the items take up 100% width then at screen width: 768px, will make them take up 32% width to give them a little breathing space between each item (as 100 / 3 = 33.3% repeating)

.vini {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.vino {
  flex: 0 0 100%;
  max-width: 100%;
}

@media(min-width: 768px) {
  .vino {
    flex:0 0 32%;
    max-width:32%;
  }
}