Центрирующие элементы в изотопе

Приветствуем всех, и я надеюсь, что у вас все хорошо. Я использую изотоп, и ниже вы можете увидеть JavaScript, который я написал. Я считаю невозможным центрировать элементы li, если они являются элементами изотопа. Чтобы увидеть, что я имею в виду, центрируя, см. Изображения ниже. Мне удалось центрировать весь изотоп на экране, но мне нужно, чтобы элементы тоже были центрированы, а не просто плавали влево.

Начните с моего кода script:

<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>

Основная структура HTML:

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

Изотоп работает очень хорошо, без проблем (до сих пор). Это мой текущий макет:

И это желаемый макет.

Я даже проверил здесь и попытался использовать репозиторий David DeSandro, но без успеха. Поэтому, пожалуйста, ребята, вы можете помочь мне здесь, чтобы достичь макета выше? Спасибо всем заранее.

центрирование изотопов jQuery

Ответы

`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;
}`

<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>