How to build a grid like that with Tailwind with fixed pixel widths?

I'm trying to build a grid layout as can be seen on the screenshot. I want to achieve this layout:

1st row: Two columns next to each other. The first column should be 660px wide. The second column should fill up the rest of the space

2nd row: The first column should be taller and fill two rows. The second column should contain two elements each containing 50% height. The second column should also be 660px wide.

3rd row: A single column with 100% with.

Problem: I managed to achieve this layout but I'm not able to set the first column in the first row to be 660px wide and the second column in the second row to be 660px wide.

How can I achieve that?

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

Solution

CSS grids use tracks to align items so it's not possible to give different widths to different columns, you could have used grid areas but that doesn't let you specify a fixed width and would have been the same as what you've done with 6 columns.

I think in this case a flexbox container fits better because in flex:

We can specify a min width for items
Every "row" is separated from the context and can get different spacing

This is the full example with flexboxes and 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>