Как сделать сетку внутри другой CSS-сетки?

Question

Я пытаюсь создать Грид внутри другой Грид, но это не сработает.Я попробовал даже Flexbox, но это как моя вредная Grid перезаписывает все, как я даю несуществующий код, что мне не хватает?Кроме того, я пытаюсь создать внутреннюю сетку внутри карусели (slick-js), может быть, это то, что вызывает у меня проблемы?

Я пытался сделать внутреннюю сетку CSS не в области сетки.и это не сработает, у меня нет выбора для себя.

#landing{
  height: 100vh;
  display: grid;
  grid-template-columns: 40px repeat(6, 1fr) 40px;
  grid-template-rows: 40px repeat(6, 1fr) 40px;
  font-size: 1em;
  grid-template-areas: 
  "x-t-l . . . . . . x-t-r"
  ". . . . . . . ."
  ". . . . . prev . ."
  ". . . . . . . ."
  ". . . . . . . ."
  ". . . . . next . ."
  ". . . . . . info ."
  "x-b-l . . . . . . x-b-r";
}

#carousel{
  display: flex;
  grid-column: 3 / 7;
  grid-row: 4 / 6;
  background-color: rgb(219, 15, 15) ;
  color: white;
}

.roller-a{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.title{
  grid-column: 1;
}

.box{
  grid-column: 2;
}

<div class="x-top-left"></div>
<div class="x-top-right"></div>

<div id="carousel">

<div class="roller-a">
  <div class="title">TEST</div>
  <div class="box">TEST 2</div>
</div>

<div class="roller-b">
  <div>TEST 3</div>
  <div>TEST 4</div>
</div>

</div>

<div class="buttons slick-next">
  <button type="button" class="slick-next">UP</button>
</div>

<div class="buttons slick-prev">    
  <button type="button" class="slick-prev">DOWN</button>
</div>

<div class="info"> 
  <img class="logo" src="../New/img/logo.png" alt="">
  <p>TEXT</p>
  <p>TEXT</p> 
</div>

<div class="x-bot-left"></div>
<div class="x-bot-right"></div>

Я ожидал, что Сетка внутри Сетки с

.roller-a{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Но она не будет создана.

Спасибо зазаранее эта штуковина вызывала головную боль.

Answer 1

Slick (как каждая библиотека слайдера) обновляет DOM, он преобразует ваш DOM из

<div class="carousel">

    <div class="roller-a">
        <div class="title">TEST</div>
        <div class="box">TEST 2</div>
    </div>

    <div class="roller-b">
        <div>TEST 3</div>
        <div>TEST 4</div>
    </div>

</div>

в

<div class="carousel slick-initialized slick-slider slick-vertical">

    <div class="slick-list draggable" style="height: 34px;">
        <div class="slick-track" style="opacity: 1; height: 68px; transform: translate3d(0px, 0px, 0px);">
            <div class="roller-a slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 905px;">
                <div class="title">TEST</div>
                <div class="box">TEST 2</div>
            </div>
            <div class="roller-b slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" style="width: 905px;">
                <div>TEST 3</div>
                <div>TEST 4</div>
            </div>
        </div>
    </div>



</div>

или, если вы предпочитаете визуальное сравнение

Что мешает вашей сетке, это в основном (но не только) стили, применяемые

.slick-vertical .slick-slide {
    display: block;
}

.slick-initialized .slick-slide {
    display: block;
}

, поэтому, если вы хотите, чтобы ваша двойная сетка работала со Slick, вы должны переопределить там CSSсвойства и проверьте, что все работает.