单行高度不会改变

Question

我正在尝试学习顺风，我做了一个带有网格的布局，我希望我的导航栏（占据第一行空间）只有32px，但是当我在其上应用高度时，它不会改变，谢谢。

export default function App() {
  return (
    <>
      <div className="grid grid-cols-4 gap-4 p-5 bg-teal-900 h-screen w-screen">
        <div className=" col-span-4 navbar row-span-1 h-8">
          <a href="#">Lien</a>
          <input type="search" name="" id="" />
        </div>
        <div className="col-span-1 row-span-1 bg-stone-400 order-3">2</div>
        <div className="col-span-1 row-span-1 bg-gray-400 order-4">3</div>
        <div className="col-span-2 row-span-2 bg-blue-300 order-2">1</div>
        <div className="col-span-2 row-span-1 bg-slate-400 order-5">4</div>
      </div>
    </>
  );
}

我尝试删除 h 屏幕和 w 屏幕，但当我这样做时，布局没有占据整个页面，并且我不想在 css 文件中指定它，我想使用纯顺风来学习它

Answer 1

如果您希望第一行为 32px，则需要指定网格轨道高度，即顺风中的

grid-rows-[32px_1fr_1fr]

。

如果您希望高度基于第一行中项目的高度而不是硬编码的 32px，请使用

grid-rows-[max-content_1fr_1fr]

。

请注意，您使用的是

h-8

，即

2rem

。它通常是 32px，但可能会根据您的根字体大小而改变。

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-rows-[min-content_1fr_1fr] grid-cols-4 gap-4 p-5 bg-teal-900 h-screen w-screen">
  <div class=" col-span-4 navbar row-span-1 h-8">
    <a href="#">Lien</a>
    <input type="search" name="" id="" />
  </div>
  <div class="col-span-1 row-span-1 bg-stone-400 order-3">2</div>
  <div class="col-span-1 row-span-1 bg-gray-400 order-4">3</div>
  <div class="col-span-2 row-span-2 bg-blue-300 order-2">1</div>
  <div class="col-span-2 row-span-1 bg-slate-400 order-5">4</div>
</div>