Dynamic width flexboxes that wrap yet keep column structure? [duplicate]

Question

I'm looking for cards that have dynamic width to fill their container, yet be able to wrap if the card gets too small. I got it to do that. Yet I notice that the last card fills up the space that's left. I don't want it to do that. I want it to keep the same column structure. is this possible? I don't have to use flexboxes if there's another way to do it let me know.

.container {
    padding: 20px;
    display : flex;
   flex-flow: row wrap;
   background:white;
}
.container > div {
    border: 1px solid black;
    background: #ececec;
    margin:5px;
    min-width:200px;
    padding: 10px;
    margin-left: 10px;
    flex: 1;
}

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

Here's my JSFiddle which is presently doing what the first picture is showing (which is not what I want). Is there a way to do this?

https://jsfiddle.net/foreyez/0b5dm2t2/

Answer 1

You can do this with CSS grid layout, using grid-template-columns. With minmax(200px, 1fr) you can set min-width of each column to 200px and max-width to one track of grid layout. You also need to use auto-fit to make tracks take full width in case there is available space.

.container {
  padding: 20px;
  display: grid;
  background: white;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.container > div {
  border: 1px solid black;
  background: #ececec;
  margin: 5px;
  padding: 10px;
  margin-left: 10px;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

Answer 2

A late answer, but here is another trick using pseudo-element that you make exactly the same as your div and you put at the end by adjusting order.

No need to add extra HTML

No need to use media query

No need to alter your current CSS and flex layout

.container {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  background: white;
}

.container>div {
  border: 1px solid black;
  background: #ececec;
  margin: 5px;
  min-width: 200px;
  padding: 10px;
  margin-left: 10px;
  flex: 1;
}

.container:after,
.container:before {
  content: "";
  margin: 5px;
  min-width: 200px;
  padding: 10px;
  margin-left: 10px;
  flex: 1;
  order: 2;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>