如何用 Tailwind 构建一个固定像素宽度的网格？

Question

我正在尝试构建一个网格布局，如屏幕截图所示。 我想实现这样的布局：

第一行：两列彼此相邻。第一列的宽度应为 660 像素。第二列应该填满剩余的空间

第二行：第一列应该更高并填充两行。第二列应包含两个元素，每个元素包含 50% 的高度。第二列也应为 660px 宽。

第 3 行： 100% 的单列。

---

问题： 我设法实现了此布局，但无法将第一行中的第一列设置为 660px 宽并将第二行中的第二列设置为 660px 宽。

我怎样才能实现这一目标？

<div class="px-4 sm:px-6 lg:px-8 mx-auto w-full lg:max-w-[78rem]">
  <div class="grid lg:grid-cols-6 auto-rows-auto mt-10 gap-4 sm:mt-16">
    <div class="flex p-px lg:row-span-1 lg:col-span-4">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 font-medium tracking-tight text-neutral-100 text-[2rem]">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>

    <div class="flex p-px lg:row-span-1 lg:col-span-2">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 font-medium tracking-tight text-neutral-100 text-[2rem]">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>

    <div class="flex p-px row-span-2 lg:col-span-2">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 font-medium tracking-tight text-neutral-100 text-[2rem]">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>

    <div class="flex p-px lg:col-span-4 lg:row-span-1">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 font-medium tracking-tight text-neutral-100 text-[2rem]">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>

    <div class="flex p-px lg:col-span-4 lg:row-span-1">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 font-medium tracking-tight text-neutral-100 text-[2rem]">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>

    <div class="flex p-px lg:col-span-6 lg:row-span-1">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 font-medium tracking-tight text-neutral-100 text-[2rem]">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

CSS网格使用轨道来对齐项目，因此不可能为不同的列提供不同的宽度，您可以使用网格区域，但这不允许您指定固定宽度，并且与您所做的相同6 列。

我认为在这种情况下，Flexbox 容器更适合，因为在 Flex 中：

我们可以指定项目的最小宽度
每个“行”都与上下文分离，并且可以获得不同的间距

这是带有 flexbox 和 flex-basis 的完整示例：

<div class="mx-auto w-full px-4 sm:px-6 lg:max-w-[78rem] lg:px-8">
  <!-- Column wrapper -->
  <div class="mt-10 flex flex-col gap-4 sm:mt-16">
    <!-- This is a row -->
    <div class="flex gap-4 p-px">
      <!-- First element -->
      <div class="shrink-0 basis-[660px] overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 text-[2rem] font-medium tracking-tight text-neutral-100">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <!-- Second element -->
      <div class="overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 text-[2rem] font-medium tracking-tight text-neutral-100">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <!-- This is a row -->
    <div class="flex gap-4 p-px">
      <!-- First element -->
      <div class="overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
        <div class="px-10 py-5">
          <p class="mt-2 text-[2rem] font-medium tracking-tight text-neutral-100">Lorem Ipsum</p>
          <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <!-- Column wrapper of second and third element of the row -->
      <div class="flex shrink-0 basis-[660px] flex-col gap-4">
        <!-- First element in column -->
        <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
          <div class="px-10 py-5">
            <p class="mt-2 text-[2rem] font-medium tracking-tight text-neutral-100">Lorem Ipsum</p>
            <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <!-- Second element in column -->
        <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
          <div class="px-10 py-5">
            <p class="mt-2 text-[2rem] font-medium tracking-tight text-neutral-100">Lorem Ipsum</p>
            <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- This is a row -->
    <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15">
      <div class="px-10 py-5">
        <p class="mt-2 text-[2rem] font-medium tracking-tight text-neutral-100">Lorem Ipsum</p>
        <p class="mt-2 max-w-lg text-lg text-neutral-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</div>