小编Apo*_*tne的帖子

如何在 tailwind CSS Grid 中设置列的最小内容？

我的布局看起来像这样

布局代码：

const Layout = ({ children }: { children: ReactNode }) => {
return (
    <div className="grid grid-cols-2 grid-rows-2">
        <Head>
            <title>Ystream</title>
        </Head>

        <nav className="row-span-2">Sidebar</nav>

        <header>
            <Navbar />
        </header>

        <main>{children}</main>
    </div>
);
};

Run Code Online (Sandbox Code Playgroud)

在这个包含 3 个块的网格中，我有 2 列，我希望第一列（侧边栏）的宽度为这样，min-content以便我可以按照我想要的方式灵活设置侧边栏的宽度。

准确地说，在 CSS 中你会做类似的事情grid-template-columns: min-content 1fr。

如何在 Tailwind 中复制这一点？

css reactjs tailwind-css

Apo*_*tne

2022 05-30

6
推荐指数

1
解决办法

7186
查看次数