Css Tailwind：如何设置网格的自动填充

发布于07月28日

我在一个分区下有两个分区.

第一个div应该是w-64.

第二个div的宽度希望是除64之外的其他宽度.

如何制作？

如果我用grid，那怎么做呢？

<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>

推荐答案

您可以向第二个div添加两个Tailwind属性:

w-[calc(100vw-16rem)]，其中100vw是全屏，w-64 = width: 16rem; /* 256px */)，然后我们计算div的宽度.
之后，我们用ml-auto抵消了第二个div.

<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

对于网格，我们需要向父元素添加grid属性，并设置两列grid-cols-[16rem_calc(100vw-16rem)].第一列是静态的，第二列是响应的.我们还需要从第一个子元素中删除所有属性.

<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>