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
Ive never really done anything with tables but why not use a table?
tables wont resize their cells with different screens ?
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
then ill have to give each cells some specific height and width
how will i make it responsive
when using table
just height i believe.
for the wide one maybe two tables so they can wrap.
not too familiar with tables myself
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 %
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.
then how will the child divs get specific heights as shown in design
you see all cells from row 2 have different heights
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
yea
like every column has differnt height and width
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.
okay so like giving the heading row width and height
and then let child divs occuppy the remainig space
is that what u meant?
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
explain this if i use table ?
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.
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.