how to make 3 grid not to take height of other column
In the image, i made three column grid and when I put data into first column the 2nd and third also start taking height of the first column where I put data
17 Replies
I want this, all column heights should be independent
<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-200 p-4 rounded-md">
<!-- Column 1 content -->
</div>
<div class="bg-gray-200 p-4 rounded-md">
<!-- Column 2 content -->
</div>
<div class="bg-gray-200 p-4 rounded-md">
<!-- Column 3 content -->
</div>
</div>
This is my code, sorry unable to put the code markdown as I am on ios
This should be in #front-end .
Is this what you're looking for?
https://codepen.io/vince1444/pen/gOQrLLG
Yes sir, in the codesand box it didnt ise grid col
Yea I didn't use a css framework
So how should I do that sir
I'm not sure, never really used a css framework. This took me like 10 minutes in vanilla css, so if you aren't comfortable with something like this in vanilla css I recommend ditching the framework until you can do simpler layouts like this
You shouldn't really touch frameworks until you learn the basics imo
All I did was use grid and flexbox, Kevin has a lot of videos about both š
Okay sit
If you don't want to ditch the css framework what you're looking for is flexbox for each card, grid is going to be your outer container
I would try to replicate how I did it but with your framework
It's for an assignment, I don't want to put more effort that's why I used Tailwind.
by default grid items "stretch", so find Tailwind's equivalent of
align-items:start either for the grid wrapper or align-self:start for the nested items themselves.
That should take care of the boxes. For their content I'd also use flexbox with columns, as @vince suggested.
It's for an assignment, I don't want to put more effort that's why I used Tailwind.sure, why learn something by doing assignments, if you can cheat but don't understand what you're doing and have to resort to other people's help? š š You still need to understand CSS in order to use a framework like Tailwind effectively or you'll always hit walls and waste your time trying to "solve" trivial things like aligning boxes in a grid. Good luck mate.
items-start this works when I put this in main container.
the assignment is to showcase my backend skills not frontend. I know basic so I tried with the framework. Who will jump into the framework without knowing the basic or fundamentals. And I didnt say write code for me. I just ask why its happening.
I think the key takeaway is to not use something like Tailwind when you don't know how to do something (relatively) basic like this in vanilla CSS. It's fine if you don't know them everyone starts somewhere and that's why you have servers like this so that you can get help š Kevin has great videos on both.
The mentality of frameworks making css easier isn't really true when you don't know the fundamentals though, so I'd stick with just the fundamentals until you get a clear understanding of them and then you can choose a framework after you understand what benefits it can have for you as a developer
A lot of people like to hype up Tailwind as the "use it for everything" thing, and in my opinion that's not really true or helpful
Agree on this. Anyways sir won't argue. Thanks for the response and help.
@webmechanic Thanks to you also.
Np! I don't think it was anyone's intention to argue either, so please don't feel bad for asking or have this prevent you from asking other questions in the future š
no sir not at all. You guys only made me a a dev. I am self-taught developer. Wish me good luck sir, this assignment is for my first job as a developer. Before I was into freelancing.
š
Ohh exciting! Good luck š