Is it better use flex or grid or other approaches for this type of layout ?
11 Replies
I tend to think ahead of time and pick whatever provides simplicity, maintainability and effectively covers the most occurring edge cases. Without any context or content even a table could make sense tho, since there likely will be data after this row and with what the text and sorting-button suggests
1. What have you tried already?
1. What was easier for you to do?
1. What pain points did you have trying to make this layout?
1. What do you think?
ok2 usually i always use flex and yeah let me try first and see
after i watched kevin grid video, i just feel like grid can cover all flex case, but flex not 100% can...
Just off the top of my head, I see an outer flex container for the three categories. Flex and not grid so you can dynamically space them based off of the width of the parent element (probably put a max width or something so it's not full-width on a 4k monitor :p)
yeah there is max width around 2000px
For the inner elements, it could either be grid to force the elements in the right place. It could be flex to allow for some flexibilty. Or just a div with
float: left; on the image. Lots of ways to do ityeah i have implemented using flex it works well
what if a design like this ?
@13eck
so how to solve this design problem ?
this is what i want to achieve
@13eck @Simon if you guys have any idea better than this let me know, so i have trie make the character and button as a separate component but the other as background, but there is a problem with this approach when we resize the background will stretched...
What does your code look like right now? what's the issue(s) you're having? You really haven't given us much to go on, here
If you could provide an isolated code-snippet of your issue, using services like codepen.com, that be great. Doesn't have to be a perfect replica with the images – there are placeholder image sites too to grab a quick copy-paste from.