Tailwind: how to set autofill of grid?

user_17653656 0
Viewed 73

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>
tailwind-css reactjs css
1 Answers

You can add to the second div two Tailwind properties:

  1. w-[calc(100vw-16rem)], where 100vw is a fullscreen and w-64 = width: 16rem; /* 256px */), then we calculate the width of the div.
  2. 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>

Edit dazziling-code

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>

Edit dazziling-code

user_155451160
Related