Как убрать скачок блоков при смена формата итемов?

$(document).ready(function() {
  function initSlick() {

   var wrapper = $('.shop__item');
  wrapper.each(function(index, element) {
    let __this = $(this);
    let gallery = __this.find('.shop__slider');
    let arrowsShop = __this.find('.shop__wrap-btn');
    let dots = __this.find('.shop__dots');
    gallery.slick({
      infinite: true,
      // speed: 600,
      slidesToShow: 1,

      // autoplay: true,
      //autoplaySpeed:5000,
      draggable: true,
      fade: false,
      arrows: true,
      appendArrows: arrowsShop,
      prevArrow: '<button class="shop__btn shop__btn--dir_left"></div>',
      nextArrow: '<button class="shop__btn shop__btn--dir_right"></button>',
      dots: false,
      appendDots: dots,
      customPaging: function(slider, i) {
        return '0' + (i + 1);
      },
      dotsClass: 'shop__dots-list',

    responsive: [
      {
        breakpoint: 841,
        settings: {
          dots: true,
          arrows: false,
          fade: true
        }
      }
    ]
    });
  });
}

initSlick();

function destroySliders() {
  let sliders = $('.shop__item');
  sliders.each(function(index, element) {
    let __this = $(this);
    let gallery = __this.find('.shop__slider');
    gallery.slick('unslick');
  })

}

function changeFormat(btn, btn_active, btn_check, col, wrap, inner) {
  $(btn).on('click', function() {


    destroySliders();
    initSlick();
    let elems = $(btn);
    elems.each(function(index, item) {
      $(item).removeClass(btn_active);
    });
    $(this).addClass(btn_active);
    if ($(col).hasClass(btn_check)) {
      $(wrap).addClass(inner);
    } else {
      $(wrap).removeClass(inner);
    }
  })


}


changeFormat('.shop__view', 'shop__view--active', 'shop__view--active', '.shop__view--col', '.shop', 'shop--inner');

  });

.shop {
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 34px;
}

.shop__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop__elem {
    font-size: 12px;
    line-height: 1.2;
    color: #6B6C70;
    margin-bottom: 32px;
}

.shop .select__wrap {
    max-width: 290px;
    margin-bottom: 32px;
}

.shop .select__placeholder {
    border: 1px solid #ECEDF3;
    border-radius: 4px;
}

.shop .select__list {
    margin-top: 10px;
    border: 1px solid #ECEDF3;
    border-radius: 4px;
}

.shop__wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.shop__slider {
    position: relative;
}

.shop__item {
    position: relative;
    width: calc(100% / 3 - 40px);
    margin: 0 20px;
    margin-bottom: 32px;
}

.shop__item:hover .shop__size,
.shop__item:hover .shop__btn {
    opacity: 1;
    visibility: visible;
}

.shop__item .slick-track {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop__pic {
    display: block;
}

.shop__pic img {
    display: block;
    margin: 0 auto;
}

.shop__holder {
    display: flex;
}

.shop__box--aside {
    width: 290px;
    padding-top: 2px;
}

.shop__box--content {
    width: calc(100% - 290px);
    padding-right: 40px;
}

.shop__subtitle {
    font-size: 14px;
    line-height: 1.2;
    color: #3D3F42;
    text-transform: uppercase;
    padding-bottom: 24px;
    font-weight: 600;
}

.shop__list {
    display: flex;
    flex-direction: column;
    padding-bottom: 48px;
}

.shop__list--size .shop__col {
    text-transform: uppercase;
}

.shop__col {
    cursor: pointer;
    display: inline-block;
    width: max-content;
    font-size: 14px;
    line-height: 1.2;
    color: #9F9F9F;
    margin-bottom: 16px;
}

.shop__row {
    position: relative;
    margin-bottom: 16px;
}

.shop__add {
    cursor: pointer;
    position: absolute;
    display: none;
    top: 10px;
    left: 10px;
    width: 18px;
    height: 18px;
    border: none;
    outline: none;
    padding: 0px;
    background-color: transparent;
}

.shop__add--active {
    display: block;
}

.shop__add--active .shop__icon {
    fill: #3D3F42;
}

.shop__icon {
    width: 100%;
    height: 100%;
}

.shop__size {
    position: absolute;
    z-index: 2;
    left: 0px;
    bottom: 0px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    background-color: rgba(249, 249, 249, 0.8);
    padding: 0 12px;
    padding-top: 23px;
    margin: 0 -12px;
    transition: 0.5s opacity, 0.5s visibility;
}

.shop__user {
    user-select: none;
    cursor: default;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #9F9F9F;
    margin: 0 12px;
    margin-bottom: 23px;
}

.shop__user--active {
    color: #212223;
}

.shop__sale {
    cursor: default;
    user-select: none;
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 43px;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background-color: #212223;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 0;
}

.shop__title {
    font-size: 14px;
    line-height: 1.4;
    color: #3D3F42;
    text-align: center;
    margin-bottom: 8px;
}

.shop__block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop__price {
    font-size: 12px;
    line-height: 1.2;
    color: #9F9F9F;
    text-transform: uppercase;
    text-align: center;
}

.shop__price--old {
    text-decoration: line-through;
    padding-right: 8px;
}

.shop__inner {
    display: flex;
    align-items: center;
}

.shop__btn {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: block;
    width: 44px;
    height: 44px;
    background-color: transparent;
    color: #ffffff;
    border: none;
    outline: none;
    transition: 0.5s opacity, 0.5s visibility;
}

.shop__btn--dir_left:after,
.shop__btn--dir_right:after {
    position: absolute;
    content: ' ';
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 3px);
    border-left: 2px solid #6B6C70;
    border-top: 2px solid #6B6C70;
    transform: rotate(-45deg);
}

.shop__btn--dir_right {
    right: 0px;
    transform: translateY(-50%) scaleX(-1);
}

.shop__dots-list {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;
}

.shop__dots-list li {
    cursor: pointer;
    font-size: 0px;
    width: 5px;
    height: 5px;
    background-color: #E8E8E8;
    border-radius: 13px;
    margin: 0 4px;
    margin-bottom: 10px;
}

.shop__dots-list li.slick-active {
    background-color: #9F9F9F;
}

.shop__control {
    display: none;
}

.shop__rebuild {
    display: block;
    width: 100%;
    height: 100%;
}

.shop__view {
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: none;
    outline: none;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    padding: 0px;
    background-color: #fff;
}

.shop__view--row {
    margin-right: 24px;
}

.shop__view--row .shop__rebuild {
    fill: transparent;
    stroke: #6B6C70;
}

.shop__view--row.shop__view--active .shop__rebuild {
    stroke: #3D3F42;
}

.shop__view--col .shop__rebuild {
    fill: #6B6C70;
    stroke: transparent;
}

.shop__view--col.shop__view--active .shop__rebuild {
    fill: #3D3F42;
}

@media screen and (max-width: 1050px) {

.shop__item {
    width: calc(100% / 2 - 40px);
}

}

@media screen and (max-width: 960px) {

.shop__box--content {
    padding-right: 30px;
}

}

@media screen and (max-width: 840px) {

.shop {
    padding-top: 12px;
    padding-bottom: 14px;
}

.shop__elem {
    display: none;
}

.shop .select__wrap {
    max-width: 172px;
    margin-bottom: 28px;
}

.shop .select__wrap:after {
    display: none;
}

.shop .select__placeholder {
    background-image: url(../img/icons/filter.svg);
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-size: 16px 14px;
    font-size: 12px;
    color: #3D3F42;
    text-transform: uppercase;
    border-color: #3D3F42;
    padding-left: 48px;
    padding-right: 15px;
}

.shop .select__item {
    font-size: 12px;
    color: #3D3F42;
}

.shop .select__list {
    border-color: #3D3F42;
}

.shop__wrap {
    flex-direction: column;
    margin: 0px;
}

.shop__item {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 16px;
}

.shop--inner .shop__wrap {
    flex-direction: row;
    margin: 0px -20px;
}

.shop--inner .shop__item {
    width: calc(100% / 2 - 40px);
    max-width: 100%;
    margin: 0px 20px;
    margin-bottom: 16px;
}

.shop__box--aside {
    display: none;
}

.shop__box--content {
    width: 100%;
    padding-right: 0px;
}

.shop__row {
    margin-bottom: 8px;
}

.shop__size {
    display: none;
}

.shop__title {
    margin-bottom: 5px;
}

.shop__control {
    display: flex;
    margin-bottom: 28px;
}

}

.svg-about{
  width: 0px;
  height: 0px;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    //min-height: 100vh;
    overflow-x: hidden;
    color: #333333;
    background-color: #f7f7f7;
    font-size: 16px;
    line-height: 1.2;
    font-weight: normal;
    font-style: normal;
    font-family: OpenSans;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>

<svg class="svg-about">
        <g id="favorites">
           <path d="M285.257,35.528c58.743,0.286,106.294,47.836,106.58,106.58c0,107.624-195.918,214.204-195.918,214.204S0,248.165,0,142.108c0-58.862,47.717-106.58,106.58-106.58l0,0c36.032-0.281,69.718,17.842,89.339,48.065C215.674,53.517,249.273,35.441,285.257,35.528z" />
        </g>
        <g id="btn--col">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 16C0.447715 16 0 15.5523 0 15V1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1V15C16 15.5523 15.5523 16 15 16H1ZM1.5 1.5V7.5H7.25V1.5H1.5ZM8.75 1.5V7.5H14.5V1.5H8.75ZM7.25 9H1.5V14.5H7.25V9ZM8.75 14.5V9H14.5V14.5H8.75Z"/>
        </g>
        <g id="btn--row">
            <mask id="path-1-inside-1" fill="white">
            <rect width="16" height="16" rx="1"/>
            </mask>
            <rect width="16" height="16" rx="1" stroke-width="3" mask="url(#path-1-inside-1)"/>
        </g>
    </svg>


    <section class="shop">
        <div class="container">
            <div class="shop__holder">
                <div class="shop__box shop__box--content">
                    <div class="shop__inner">
                        <p class="shop__elem">Показано <span>9</span> з <span>35</span> результатів</p>
                    
                        <div class="shop__control">
                            <button class="shop__view shop__view--row shop__view--active">
                                <svg viewBox="0 0 16 16" class="shop__rebuild">
                                    <use xlink:href="#btn--row"></use>
                                </svg>
                            </button>
                            <button class="shop__view shop__view--col">
                                <svg viewBox="0 0 16 16" class="shop__rebuild">
                                    <use xlink:href="#btn--col"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="shop__wrap">
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 1</p>
                            <div class="shop__block">
                                <p class="shop__price">5000</p>
                            </div>
                        </div>
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 2</p>
                            <div class="shop__block">
                                <p class="shop__price shop__price--old">5000 </p>
                                <p class="shop__price">3000 </p>
                            </div>
                            <p class="shop__sale">sale</p>
                        </div>
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add shop__add--active">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 3</p>
                            <div class="shop__block">
                                <p class="shop__price">5000 </p>
                            </div>
                        </div>
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 4</p>
                            <div class="shop__block">
                                <p class="shop__price">5000 </p>
                            </div>
                        </div>
                    </div><!--end shop__wrap-->
                </div>
                <div class="shop__box shop__box--aside">
                    hhh
                </div>
            </div><!--end shop__holder-->
        </div>
    </section>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>