Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <style id="js-css">
  </style>
  
  <span id="title">Flexbox Grid</span>
  <span id="sub-title">How to make each row have the same number of items?</span>
  
  <div id="buttons">
    <button onClick="increase()">+</button>
    <button id="force" onClick="resize()"><code>resize()</code></button>
    <button onClick="decrease()">-</button>
  </div>
    
  <div id="container">
    <div class="item">
      <span>ITEM #1</span>
    </div>
    <div class="item">
      <span>ITEM #2</span>
    </div>
    <div class="item">
      <span>ITEM #3</span>
    </div>
    <div class="item">
      <span>ITEM #4</span>
    </div>
    <div class="item">
     <span>ITEM #5</span>
    </div>
    <div class="item">
     <span>ITEM #6</span>
    </div>
  </div> 
  
</body>
</html>
 
var resize = function() {
  var container = document.querySelector('#container');
  var items = document.querySelectorAll('.item');
  var css = document.querySelector('#js-css');
 
  var itemWidth = 100;
  var containerWidth = $(container).width();
  
  var perRowCount = Math.floor(containerWidth / itemWidth);
  var rowCount = Math.ceil(items.length / perRowCount);
  var newPerRowCount = Math.floor(items.length / rowCount);
  
  var newItemWidth = (containerWidth / newPerRowCount) - (parseInt($(items[0]).css('margin')) * 2);
  
  css.innerHTML = '.item { width: ' + newItemWidth + 'px; }';
};
​
var increase = function () {
  var container = document.querySelector('#container');
  
  $(container).width($(container).width() + 15);
  
  resize();
};
​
var decrease = function () {
  var container = document.querySelector('#container');
  
  $(container).width($(container).width() - 15);
  
  resize();
};
​
resize();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
davidwroxypro
0viewers