CODEWITHSUNDEEP
csslayoutnext.jstailwind-csscss-grid
Mit
Mit

Reputation: 69

Tailwind Grid Height

Hi I'm designing a grid system in NextJS using Tailwind. I'm having trouble auto sizing the grids to fit the size of the parent element.

Below are two images to help convey my meaning.

  1. Mockup wireframe of the container and grids. (Red = Wrapper, Pink = Layout, Purple = Grids)

enter image description here

  1. What I've managed to code, (I want to resize the right hand boxes to the height of the window.)

enter image description here

<div className="bg-white dark:bg-custom05 md:fixed md:inset-y-0 md:left-0 md:flex md:items-start md:overflow-y-auto md:w-full ">
<div className="min-h-full md:flex md:w-16 md:flex-none md:items-center md:whitespace-nowrap md:py-12 md:leading-7 md:[writing-mode:vertical-rl]">
<div className="flex justify-between text-sm gap-12">
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-1">Avatar</div>
<div className="sm:w-60 sm:h-14 md:w-14 md:h-60 rounded-lg flex items-center justify-center bg-custom03 order-2">Author Tag Line</div>
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-3">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom06 relative z-10 mx-auto p-10 md:max-w-md md:min-h-full md:flex-auto md:border-x md:border-custom07">
<div className="grid grid-row-3 grid-flow-row gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom05 relative z-9 p-10 mx-auto md:max-h-full md:flex-auto ">
<div className="grid  grid-col-2 grid-flow-col gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center col-span-2">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-2 col-span-2">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-3">03</div>
</div>
</div>
</div>

Answer Result & Refactor

Thanks to MagnusEffect's help I've been able solve the problem. Ended up changing some of his styling and made sure to set the padding, gaps and other minor changes, hover its worked fantasticly!

enter image description here

Upvotes: 1

Views: 9195

Answers (2)

MagnusEffect
MagnusEffect

Reputation: 3925

You can use the flex properties to create the following grid systems like this.

<script src="https://cdn.tailwindcss.com"></script>
<div class=" border-red-600 border-2 p-3 flex flex-row items-center space-x-2">
  <div class=" p-4 border-pink-500 border-2 h-screen space-y-2 items-center w-1/12 flex flex-col">
      <div class=" border-purple-500 border-2 h-20 ">Av</div>
      <div class=" border-purple-500 border-2 h-72">ot</div>
  </div>
  <div class=" p-4 border-pink-500 border-2 h-screen w-4/12 flex flex-col space-y-2">
      <div class="p-3 border-purple-500 border-2 h-48">Video</div>
      <div class="p-3 border-purple-500 border-2 h-24">Description</div>
      <div class="p-3 border-purple-500 border-2 h-48">Github, Socials</div>
  </div>
  <div class=" p-4 border-pink-500 border-2 h-screen w-7/12 space-x-4 flex flex-row items-center">
      <div class="flex flex-col space-y-2 w-1/2 h-full">
          <div class="border-purple-500 border-2 h-full p-4">Projects</div>
          <div class="border-purple-500 border-2 h-full p-4">Empty </div>
      </div>
      <div class="p-6 border-purple-500 border-2 w-1/2 h-full ">
        Study/Work
      </div>
  </div>
</div>

Note:

  • Replace class= with className= in Reactjs.
  • View the demo in fullPage

Upvotes: 5

Dan Block
Dan Block

Reputation: 47

Try h-screen or h-fit or you can add custom sizing h-[] in the square brackets you can add any sizing (px, vh) etc.

Upvotes: 1

Related Questions