Grid styling
I want to create a tile with specific size and after clicking + plus sign it should create another one
in 2nd image i am experimenting grids but somehow cant get them proper they arent suppose to be far apart
8 Replies
export default function Home() {
return (
<div className="flex flex-col ">
<div className="">Broker Login PAGE</div>
<div className="grid grid-cols-4 grid-flow-auto border h-screen">
<div className="bg-red-800 p-5 m-5 w-40 h-40 text-center content-center">01</div>
<div className="bg-red-800 p-5 m-5 w-40 h-40 text-center content-center">02</div>
<div className="bg-red-800 p-5 m-5 w-40 h-40 text-center content-center">03</div>
<div className="bg-red-800 p-5 m-5 w-40 h-40 text-center content-center">04</div>
<div className="bg-red-800 p-5 m-5 w-40 h-40 text-center content-center">05</div>
<div className="bg-red-800 p-5 m-5 w-40 h-40 text-center content-center">06</div>
{/<div className="m-5">
<LoginTile/>
</div>/}
</div>
</div>
);
}
this is my codeyou are limiting the size of the boxes but your grid makes 4 equal cols that span across the whole window 🙂
yeah but how do i make it dynamic
eg i have just 1 tile ...later i keep adding
so based on tile size it should add horizontally as much possible
and start on next line
hmm you probably looking for auto-fit or auto-fill https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
Sara Soueidan
CSS-Tricks
Auto-Sizing Columns in CSS Grid:
auto-fill vs auto-fit | CSS-Tr...One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a
I am using tailwind css
I'm sure tailwind has that coverd check the docs
You can't define the grid template columns and expect it to be auto fill at the same time.
I don't think 🤔 that this can be done with Tailwind built-in utility classes.
You would either need to add it to the config or, if it is a one-off use case, you could just use
grid-cols-[repeat(auto-fit,10rem)]Got it done by flex easily ...not sure why i was doing with grid
too much nested flex ended up not getting it right initially had to clean up parent styling first