Issue
My Layout looks like this 
Layout Code:
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>
);
};
In this grid with 3 blocks, I have 2 columns and I want the width for the first column (Sidebar) to be min-content so that I have flexibility to set the width of the side bar the way I want.
To be precise, in CSS you'd do something like grid-template-columns: min-content 1fr.
How do replicate this in Tailwind?
Solution
This seemed to work for me:
grid-cols-[min-content_1fr]
which translates to
.grid-cols-\[min-content_1fr\] {
grid-template-columns: min-content 1fr;
}
Answered By - Apoorv Patne
Answer Checked By - - Jay B. (ReactFix Admin)