is this sort of layout possible with flexbox or react-css-grid?

Question

I am about to start a react project and it involves a bit complicated layout and it needs to be responsive.

I have drawn a rough diagram in paint of what I need to do and have marked the places where I am finding it tough to accomplish.

could you tell me if that kind of layout can be accomplished in react with either flexbox or react-css-grid or maybe something else?? if there's a link you could point me to a tutorial or an article which explains this, then that would be very helpful.

Here's the image

Answer 1

Flexbox should be enough. You can use flexbox-direction: column for the base page, and give appropriate CSS classes to the React component you will use to build this layout.

For A, you can use transform: skewY() but the element beneath should accommodate the new space after skewing element A.

Regarding B, it can easily be done using flexbox. Justify items to flex-start (and some padding), and then give the bigger square position: relative. Smaller square should then have the position: absolute, and then you can position it accordingly to the bigger square. That should be it in short lines, but I can throw some demo later if you still need help.