Search code examples
htmlcsstailwind-csscss-grid

Scroll only one part of the grid in Tailwind CSS

I am working on a layout using Tailwind CSS that involves a grid structure with a fixed header and a main content area. The main content area is divided into three sections: left, center, and right.

<div class="grid min-h-screen grid-cols-[0_1fr] grid-rows-[98px_1fr] xl:grid-cols-[auto_1fr]">
  <!-- Fixed Header -->
  <div class="sticky top-0 col-span-full row-start-1 grid grid-cols-2 grid-rows-2 items-center bg-red-500">Header</div>

  <!-- Main Content Area -->
  <main class="col-start-2 col-end-3 row-start-2 grid grid-cols-4 sm:grid-cols-8 xl:grid-cols-12">
    <div class="col-span-full grid grid-cols-[repeat(11,1fr)] grid-rows-[1fr]">
      <!-- Left Section -->
      <div class="col-start-3 col-end-5 flex justify-center bg-green-500">Left</div>

      <!-- Center Section (scrollable) -->
      <div id="overflowThisDiv" class="col-start-5 col-end-10 overflow-y-scroll bg-white">
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
      </div>

      <!-- Right Section -->
      <div class="col-start-10 col-end-12 flex justify-center bg-black text-white">Right</div>
    </div>
  </main>
</div>

I want to achieve a scrollable center section (Test divs) while keeping the left and right sections fixed. Currently, when I scroll, the entire grid scrolls, including the left and right sections.

How can I modify the Tailwind CSS or the HTML structure to ensure that only the center section (Test divs) scrolls vertically, maintaining the fixed positioning of the left and right sections?

All 3 divs should take the maximum screen vertical size, while center div being scrollable if its content exceeds the height of said div

Is it also possible to scroll anywhere on the page to start scrolling the center div only?

Any insights or code examples would be greatly appreciated.

Tailwind Playground example:

https://play.tailwindcss.com/WNBtszn3Ek

Solution

  • You can add a fixed div inside your two outside columns. This allows you to scroll everywhere on the page to move only the centered column.

    I hope my solution is what you were looking for.

    <div class="grid min-h-screen grid-cols-[0_1fr] grid-rows-[98px_1fr] xl:grid-cols-[auto_1fr]">
  <div class="sticky top-0 col-span-full row-start-1 grid grid-cols-2 grid-rows-2 items-center bg-red-500">Header</div>
  <main class="col-start-2 col-end-3 row-start-2 grid w-full grid-cols-4 sm:grid-cols-8 xl:grid-cols-12">
    <div class="col-span-full grid w-full grid-cols-[repeat(11,1fr)] grid-rows-[1fr]">
      <div class="col-start-1 col-end-3 flex justify-center bg-green-500">
        <div class="fixed">Left</div>
      </div>
      <div class="col-start-3 col-end-10 bg-white">
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
      </div>
      <div class="col-start-10 col-end-12 flex justify-center bg-black text-white">
        <div class="fixed">Right</div>
      </div>
    </div>
  </main>
</div>

    Here is the demo: https://play.tailwindcss.com/wAPoI8AruW