Issue
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>
Solution
You can add to the second div two Tailwind properties:
w-[calc(100vw-16rem)]
, where100vw
is a fullscreen andw-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>
Answered By - Anton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.