SineYlo

const SHOW_ON_LOAD = 3;
const SHOW_MORE = 2;

const items = [...document.querySelectorAll('.box-list__item')];
const button = document.querySelector('.show-more');

showItems(SHOW_ON_LOAD);
button.addEventListener('click', () => showItems(SHOW_MORE));

function showItems(count) {
  items.splice(0, count).forEach(n => n.classList.add('ui-box-active'));
  button.classList.toggle('ui-button-hidden', !items.length);
}

.box-list__item {
  display: grid;
}
.box-list__item:nth-child(8) ~ .box-list__item{
  display: none;
}
.box-list__item:nth-child(8) ~ .box-list__item.ui-box-active{
  display: grid;
}

[...document.querySelectorAll( '.box-list__item:nth-child(8) ~ .box-list__item:not(.active)' )]
  .slice(0,4)
  .forEach( el => el.classList.add('ui-box-active') )