Justify divs left in parent

Question

I have the following requirement.

The green colored parent width will be varying depending on device width. I need all the boxes to be in the center of the parent.

I have tried the following things already, but it didnt help me.

Trial 1
Parent {text-align:center} box {display:inline-block}.

This resulted in following output

Trial 2
Parent {text-align:center} box{float:left}.

This resulted in following output

Trial 3
Parent {display:flex} box -> justify-around & justify-between also didn't work.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Any help on this will be appreciated.

Answer 1

Without Javascript this very hard using floats &/or inline-block.

Flexbox offers some hope but even then some creativity is required.

Essentially, provided the maximum number of elements "per row" is known you can create a required number of invisible elements which can be ustilised in conjunction with justify-content:center to acheieve the last line appearance you require by essentially pushing the last line content back over to the left.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>

Answer 2

Got it working by using jQuery and adding a #wrapper.

All you've got to do is calculate how many items will fit on one row. Then you set the wrapper to the exact width that is needed to fit these items.

I hoped it could be done in pure CSS, but as far as I know there is no Math.floor() equivalent for CSS.

Example:

function fitItemsOnRow() {
  var windowWidth = $(window).width();
  var itemWidth = $(".item").outerWidth(true);
  var itemAmount = Math.floor((windowWidth / itemWidth));
  
  if(itemAmount > $(".item").length) {
    /* Set the maximum amount of items */
    itemAmount = $(".item").length;
  }
  
  var rowWidth = itemWidth * itemAmount;
  $("#wrapper").width(rowWidth);
}

$(window).resize(function() {
  /* Responsive */
  fitItemsOnRow();
});

$(document).ready(function() {
  fitItemsOnRow();
});

body {
  margin: 0px;
}
#parent {
  background: #75DB3C;
  min-width: 100vw; 
  min-height: 100vh;
  text-align: center;
}
#wrapper {
  display: inline-block;
  text-align: left;
  font-size: 0px; /* Removes default margin */
}
.item {
  display: inline-block;
  margin: 12px;
  width: 100px;
  height: 100px;
  background: #0B56A9;
}

<div id="parent">
  <div id="wrapper">
    <!-- A wrapper is necessary to center the items -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>