css HTML网格单元格，行开始和行跨度直到网格结束

xxhby3vn 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(93)

我有这个网格布局：

侧菜单（5、6、7、8）具有动态内容，并且可以填充x个项目。我想主要内容（9）跨越它的行的基础上的侧边栏的大小。
我使用顺风，每当我试图把row-span-full到单元格9，它重叠的标签（2，3，4）。意思是说，它采取了所有的行，即使我已经指出了row-start-2 .
这是我的代码

<div class="grid grid-cols-5 auto-rows-auto gap-4">
    <div class="col-start-2">2</div>
    <div class="col-start-3">3</div>
    <div class="col-start-4">4</div>
    <div class="row-start-2">5</div>
    <div class="col-start-1 row-start-3">6</div>
    <div class="col-start-1 row-start-4">7</div>
    <div class="col-start-1 row-start-5">8</div>
    <div class="col-span-4 col-start-2 row-start-2 [missing class to take up the rest of the row]">9</div>
</div>

这在HTML Grid中可以实现吗？因为这是非常容易与flexbox。

css

来源：https://stackoverflow.com/questions/76555296/html-grid-cell-with-row-start-and-row-span-til-the-end-of-the-grid

1条答案

按热度按时间

zf9nrax11#

这是一个limitation of CSS Grid itself，不是顺风的错。这里有一个解决方法：

.grid {
  background-color: darkblue;
}

.grid div:not(:has(>*)) {
  background-color: aquamarine;
  text-align: center;
}

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-5 auto-rows-auto gap-4">
  <div class="col-start-2">2</div>
  <div class="">3</div>
  <div class="">4</div>
  <div class="side-bar col-start-1 row-start-2 grid grid-cols-1 auto-rows-auto gap-4">
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class=" col-start-2 col-span-4 row-start-2">9</div>
</div>

赞(0）回复(0）举报 2023-07-01

我来回答

css HTML网格单元格，行开始和行跨度直到网格结束

1条答案

相关问题

热门标签

最新问答