带有tailwindcss的侧边栏网格

Question

我是 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>

Answer 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>