CSS always trips me up

Hello! I am hoping someone can help point me in the right direction. I am creating a data dashboard and I want the layout to look like this:

(The map, as well as all the charts, will be drawn using d3)

My question is: how do I create the correct grid layout in order to be able to have a map in the middle and 4 charts on either corner? I am using bootstrap’s container, row, col-xx-xx code. But I am not sure how to make it work in this case.

Thank you in advance.

using the position property might help u
top right
top left

1 Like

Do you have to use Bootstrap? I’d try CSS Grid if not.

Not exactly sure how you want the layout. Should the map top/bottom be flush with the graphs top/bottom? Also what happens when the screen is too small, how should it stack?

I don’t use Bootstrap so I’m really not the one to answer this but I think you might have to use 3 rows and just have the map in the center. You can, of course, use positioning and/or negative margins as well but that makes the layout more fragile.

1 Like