顺风行列布局问题

Question

我有以下要使用 Tailwind 起草的布局。

table 部分跨越两行两列。我从grid grid-rows-5 开始。但我不知道如何获得table 部分。

Answer 1

您必须将 col-span-2 和 row-span-2 类添加到表格元素中，这将允许它占用所需的空间

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

<div class="w-full max-w-md">
  <div class="grid grid-cols-3 gap-none grid-rows-5 bg-yellow-500">
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <table class="row-span-2 col-span-2 border border-gray-500">
        <tr><td>#</td><td>Name</td></tr>
        <tr><td>1</td><td>John Doe</td></tr>

    </table>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
    <div class="border border-gray-500 flex items-center justify-center">div</div>
  </div>
</div>