Question

I’m trying to fix a positing issue in a responsive design.

I have a container div, containing 4 (but it could be more or less) divs that are displayed as inline-block. I would like to know how to control the number of divs per line when the page is resized (with CSS, if it’s possible). For example, when 4 containees no longer fits in the container, the last one is moved to second line. I would like in that case to have 2 containees in the first line and 2 containees in the second line. I dont know how to do that. Your help would be welcomed!

EDIT:
it could also be 6 containees, in the case the layout would be:
– 1 line of 6 blocks if it fits
– 2 lines of 3 blocks
– 3 lines of 2 blocks
– 6 lines of one

the number of containees is variable. I just want to have the same number of containees per line

the html:

<div class="container"> 
   <div class="containee"></div>
   <div class="containee"></div>
   <div class="containee"></div>
   <div class="containee"></div>
</div>

the css:

.containee {
  width:200px;
  height:200px;
  display:inline-block;
  background-color:tomato
}

the example can be seen here : http://cssdesk.com/uGLbq

(PS : I tried to find the solution searching the web but I dont really know the good keywords related with this topic)

Answer 1

You can’t with CSS (AFAIK).

You can do “the math” dynamically with Javascript in real time.

In your case,

• you known the width of one block (in that moment),
• you can easily get the window width (in that moment),
• you know the number of your block (in that moment);

Simply apply ( (1) the first time you open the page, and (2) every time the number of blocks changes, or (3) the resolution changes) the algorithm in the following code:

// EXAMPLE OF INPUT
var windowWidth    = 1400;  // read it...
var blockWidth     = 200;   // read it or use const...
var numberOfBlocks = 10;    // read it... 


// Calculate the maximum number of blocks per row
var maxBlocksPerRow;
for (var i=0; i < numberOfBlocks; i++) {
   if ( (blockWidth * (i + 1)) > windowWidth){
      maxBlocksPerRow = i;
      break; 
   }
}

// Check the highest 0 module combination while iterating backwards
var magicNumberForMatchingBlocks = 1; // if not found, it will be 1.
for (var i = maxBlocksPerRow; i > 0 ; i--) {
   if ( (numberOfBlocks % i) == 0){
      magicNumberForMatchingBlocks = i;
      break;
   }
}

alert("With " + numberOfBlocks + " blocks, each one wide " + 
      blockWidth + " pixels, and a window wide " + windowWidth + " pixels, 
      the number of blocks per row for having always 
      the same number of block in any row is: " + magicNumberForMatchingBlocks);

Then use that number to populate or re-arrange the elements with Javascript or better with some Javascript library like jQuery.