responsive problem
Hi guys, I do not know how to handle this layout (the image). I try to use
grid-template-areas. But I don't know how to make the C block just take the space of its height and the A block take the rest height of the left column. I'm not farmiliar with grid layout. Can anyone help me? Thank you
2 Replies
You could set 2 rows, first one will be 1fr and the second one will be like 150px (whatever height u want).
For the tablet the bottom row will change it C C instead of C B
And probs set up 2 columns of both 1fr
And assign the naming used inside your grid-template-areas to the correct elements
A quick demo to demonstrate what Hidi_ has already outlined:
https://codepen.io/cbolson/pen/mdNZKpO