Help needed for this Design *please explain the approach*

i need some help regarding a design is there anyone that can help me a table kind of design where each row has different heights , how do you create such designs , do we need to explicitly define heights on these and if so how do u handle responsiveness , that would need lots of media queries this is the design how can i do this using css or bootstrap
16 Replies
vince
vinceβ€’15mo ago
Ive never really done anything with tables but why not use a table?
VishuTheGrt
VishuTheGrtβ€’15mo ago
tables wont resize their cells with different screens ?
CodeNascher
CodeNascherβ€’15mo ago
yeah, I'd use a table for each of the 3 divs. and use grid auto-fit to wrap them automatically just a quick thought. i think this should work
VishuTheGrt
VishuTheGrtβ€’15mo ago
then ill have to give each cells some specific height and width how will i make it responsive when using table
CodeNascher
CodeNascherβ€’15mo ago
just height i believe. for the wide one maybe two tables so they can wrap. not too familiar with tables myself
VishuTheGrt
VishuTheGrtβ€’15mo ago
the cells width would resize according to the content in it if we dont give it a width dont think the cells width can be achieved in the same way as design i did the design using divs and gave the containers width as %
snxxwyy
snxxwyyβ€’15mo ago
in my opinion i wouldn't use a table, i'd use a grid, you don't need to define a height as each section would be wrapped in a div and the children of that div define the height. the only responsiveness you'd need is altering the grid and some content to stack more the smaller the screen size gets.
VishuTheGrt
VishuTheGrtβ€’15mo ago
then how will the child divs get specific heights as shown in design you see all cells from row 2 have different heights
snxxwyy
snxxwyyβ€’15mo ago
ohh yeah i see what you're on about now, so you're asking how the end section is the same height because it's got three rows rather than 4 like the others? @vishuthegrt
VishuTheGrt
VishuTheGrtβ€’15mo ago
yea like every column has differnt height and width
snxxwyy
snxxwyyβ€’15mo ago
if you display it using flexbox the shorter sections automatically stretch to be the same height as the longest one. If you display it as a grid and set the row height each one will be the same.
VishuTheGrt
VishuTheGrtβ€’15mo ago
okay so like giving the heading row width and height and then let child divs occuppy the remainig space is that what u meant?
snxxwyy
snxxwyyβ€’15mo ago
ohh you meant the content not the sections containing the content i misread it πŸ˜…, my fault yeah i'd experiment with a table like the others said
VishuTheGrt
VishuTheGrtβ€’15mo ago
explain this if i use table ?
-eve
-eveβ€’15mo ago
Maybe put each block into their own div with a grid on it, and then put those four divs into a div that wraps all of them? And then use flexbox on that outer div to align them up horizontally. (With added align/justify/direction where needed). Would need some calculations for the percentages (probably with fr) of each different grid heights for each new cell though as well.
Chooβ™šπ•‚π•šπ•Ÿπ•˜
This initially looks like 1 table, but it's actually 5 different tables placed next to each other, so I would just make 5 tables inside a flex container. You can then easily rearrange them for responsiveness, because each of the tables is so small that no individual table needs to be broken apart for small screens. You could also use 5 grids instead of tables.
Want results from more Discord servers?
Add your server