Centering elements in isotope

Question

Hello everyone and I hope you're doing well. I am using Isotope and below you can see the JavaScript that I have written. I find it impossible to center li elements if they are the Isotope elements. To see what I mean by centering, please see the images below. I've managed to center the whole Isotope to the screen but I need the elements to be centered too and not just float to the left side.

Let's start with my script code:

<script>
 $(document).ready(function(e) {
    $(".ullist li").addClass('element-item');
});

</script> 
<script>
$(document).ready(function(e) {
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  //layoutMode: 'fitRows',
});
//$('.grid').isotope({ layoutMode : 'fitRows' });
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};

// bind filter button click
$('#filters').on( 'click', 'a', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.secmenu ul a').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'a', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});});
</script> 
<script>
$(function(){

  var $container = $('.grid'),
      $body = $('body'),
      colW = 20,
      columns = null;

  $container.isotope({
    // disable window resizing
    resizable: true,
    masonry: {
      columnWidth: colW,
        isFitWidth: true
    }
  });

  $(window).smartresize(function(){
    // check if columns has changed
    var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
    if ( currentColumns !== columns ) {
      // set new column count
      columns = currentColumns;
      // apply width to container manually, then trigger relayout
      $container.width( columns * colW )
        .isotope('reLayout');
    }

  }).smartresize(); // trigger resize to set container width

});
</script>

Basic HTML structure:

    <ul class="ullist grid">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
      </ul>

Isotope works pretty well with no issues (so far). This is my current layout:

And this is the desired layout.

I even checked here and tried to use David DeSandro's repository but with no success. So please guys can you help me here to achieve the layout above? Thank you all in advance.

jQuery isotope centering

Thermosphere

Answer 1

The best solution for this is using the flex-box if you not concerned to support for old browsers(below IE8). Check this pen for flex-box solution codepen Link.

ul {
  width: 600px;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
li {
  width: calc((100% / 3) - 60px);
  height: 200px;
  background-color: #d91c5c;
  margin: 30px;
}`

Boxfish

Yes but this way I won't be able to use the animated effects and filtering that isotope is giving me. I want to implement this layout in isotope code. – Thermosphere

just for the info: flex is not even in IE9 supported and you don't need to write flex-direction: row because it's the default value. And another: a most used on the wrong way is to give the flex-items a width instead of a flex-basic. – Acculturate

Answer 2

You might need to add some extra markup and increase the number of columns that Isotope is fitting items into.

<ul class="ullist grid">
  <li><span class="box">...</span></li>
  <li><span class="box">...</span></li>
  <li><span class="box">...</span></li>
  <li><span class="box">...</span></li>
</ul>

You'll then set the number of columns to something that is divisible by both 2 and 3. If you create 6, you can have the first 6 li items span two columns, and the final two span 3:

Then, use CSS to position your .boxes within the li items.

This gets tricky if you don't know how many 'stray' items you'll have at the end - you might need to use javascript to figure this out, append a class (such as .span-2, .span-3, .span-6

Bellanca