带有tailwindcss的侧边栏网格

Posted 2023-03-07

【中文标题】带有tailwindcss的侧边栏网格

【英文标题】：Sidebar grid with tailwindcss

【发布时间】：2021-07-06 19:59:38

【问题描述】：

我是 Tailwind 的新手，我阅读了文档但不了解 gird 的工作原理！

我需要像这样到达：

我的错误尝试：

<div class="grid grid-rows-3 grid-flow-col gap-4">
    <div class="col-span-2 ...">col 1</div>
    <div class="col-span-2 ...">col 2</div>
    <div class="col-span-2 ...">col 3</div>
    <div class="row-span-3 ...">col 4</div>
    <div class="row-span-3 ...">sidebar</div>
</div>

【参考方案1】：

您可以从所有单元格中删除 col-spans，并将 col-end-3 添加到您的第 2 个和第 4 个单元格中。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="border">col 1</div>
  <div class="border col-end-3">col 2</div>
  <div class="border">col 3</div>
  <div class="border col-end-3">col 4</div>
  <div class="border row-span-3">sidebar</div>
</div>

【讨论】：

如果我的意思是循环中的 cols 是动态的怎么办？我该如何处理“col-end-3”

究竟什么是动态？网格中的列数，还是要在网格中显示的项目数？您能否在您原来的问题中添加更多详细信息？

我的意思是动态列将来自“foreach”，你只需给它“col-end-3”，但对于 foreach，我无法指定哪个是第二个！

您可以，循环中具有奇数索引的项目（1、3、5 等）将对应于需要添加col-end-3 的单元格。

谢谢，我想过，但不应该是这样的，应该有办法不用$index！或者让我们回到引导程序?