[ANSWERED] html – How to make “inline-block” to go new line when its necessarry?

Question 1

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>

Question 2

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.

Bollate

[ANSWERED] html – How to make “inline-block” to go new line when its necessarry?

By

Solution 1 :

Problem :

Comments

Comment posted by John Smith

Comment posted by John Smith

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate