Question

我正在尝试在另一个网格中创建一个网格，但是它不起作用。我什至尝试了Flexbox，但是像我的透不过气的Grid一样，它覆盖了所有内容，比如我给了不存在的代码，我缺少了什么？另外，我正在尝试在Carousel（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属性并检查一切正常。

如何在另一个CSS网格内制作网格？

1 个答案: