How to make "inline-block" to go new line when its necessarry?

Question

Here is my fiddle:

#container {
  background-color: green;
}

.result {
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  max-width: 160px;
  min-width: 100px;
  height: 160px;
  border: 1px solid black;
  background-color: white;
  margin: 10px;
}

<div id="container">
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
</div>

https://jsfiddle.net/6Laudc0s/

if you try to change the width of the browser, unwanted "green" areas may appear. I want those "cards" to extends 100% always, and go new line only when they are smaller than 100 pixel. I set min-width, max-width and 100% width, seemingly in vain. When the area is too narrow, I expected the cards to shrink up to 100 pixel but instead they decided to remain the same width, and go new line instead.

thanks for closing, I mean spoiling this question. The offered two ones arent alternatives. Of course I may ask this question again, but based on this logic, its would be closed again and referred by that 2 answer too! — John Smith, Feb 17 '20 at 22:12

score 1 · Answer 1 · answered Feb 17 '20 at 21:15

Use a css grid instead:

#container {
  background-color: green;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 160px));
  grid-auto-rows: minmax(100px, 160px);
  max-width: calc(100vw - 20px);
}

.result {
  border-radius: 6px;
  height: 160px;
  border: 1px solid black;
  background-color: white;
}

<div id="container">
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
  <div class="result">1</div>
</div>

it almost the same (wrong) behaviour – John Smith Feb 17 '20 at 21:18 — John Smith, Feb 17 '20 at 21:18

How to make "inline-block" to go new line when its necessarry?

1 Answers1