Tailwind: how to set autofill of grid?-CodePudding

I have 2 divs under 1 div.

first div should be w-64.

second div's width want to be the rest except for 64.

How to make it?

and if I use grid then how to make that?

<div className="w-screen h-screen">
   <div className="fixed top-0 left-0 w-64 h-screen" >
   </div>
   <div className="flex bg-blue-100 justify-center items-center">
      {children}
   </div>
</div>

CodePudding user response：

You can add to the second div two Tailwind properties:

w-[calc(100vw-16rem)], where 100vw is a fullscreen and w-64 = width: 16rem; /* 256px */), then we calculate the width of the div.
After that we offset the second div with ml-auto.

<div className="w-screen h-screen">
  <div className="fixed top-0 left-0 w-64 h-screen"></div>
  <div className="grid w-[calc(100vw-16rem)] ml-auto bg-blue-100 justify-center items-center">
    {children}
  </div>
</div>

Grid solution

For the grid, we need to add a grid property to the parent element and set two columns grid-cols-[16rem_calc(100vw-16rem)]. The first column is static, and the second is responsive. We also need to remove all properties from the first child element.

<div className="grid grid-cols-[16rem_calc(100vw-16rem)] w-screen h-screen ">
  <div className="flex"></div>
  <div className="flex bg-blue-100 justify-center items-center">
     {children}
  </div>
</div>