如何用Tailwind实现指定固定像素宽度的网格布局？

你遇到的问题根源是使用了lg:grid-cols-6的等比例分栏，这种方式无法让不同位置的列同时固定为660px。需要改用自定义网格轨道定义，结合精确的网格定位来实现需求。

核心修改点 #

1. 替换网格列定义：将网格容器的lg:grid-cols-6改为lg:grid-cols-[660px_1fr]，显式定义两个列轨道——第一个固定660px，第二个自动填充剩余空间。
2. 调整元素网格定位：通过grid-column和grid-row类，将元素放到对应轨道位置，实现跨行列的布局。
3. 处理内部子元素高度：给第二行的660px元素内部添加flex flex-col，让其两个子元素各占50%高度。

修改后的完整代码 #

<div class="px-4 sm:px-6 lg:px-8 mx-auto w-full lg:max-w-[78rem]">
  <div class="grid lg:grid-cols-[660px_1fr] auto-rows-auto mt-10 gap-4 sm:mt-16">
    <!-- 第一行第一列：660px -->
    <div class="flex p-px lg:col-span-1 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-1 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-start-2 lg:row-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>

    <!-- 第二行第二列：660px，内部两个50%高度元素 -->
    <div class="flex p-px lg:col-start-1 lg:row-span-2">
      <div class="w-full overflow-hidden rounded-lg bg-neutral-900 ring-1 ring-white/15 flex flex-col">
        <div class="flex-1 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 class="flex-1 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>

    <!-- 第三行：100%宽度单列 -->
    <div class="flex p-px lg:col-span-2 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>

说明 #

• lg:grid-cols-[660px_1fr]是Tailwind的自定义列语法，直接定义列轨道宽度，替代原来的等比例分栏。
• lg:col-start-2和lg:row-span-2用于定位跨行列的元素，确保其占据正确的网格区域。
• 给660px的第二列元素添加flex flex-col，并给内部子元素加flex-1，实现两个子元素各占50%高度。

内容的提问来源于stack exchange，提问作者Phillip