MariusT• 35
@MariusTN
Posted
I'm not someone that is good in HTML / CSS so I'm just guessing now as I did this with Flex box today. On Grid you can use templates, so you label each card and make a template for them? In theory that should fix your issue.
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: ". ." ". ."; }
I think that code will do the trick in your @media screen and (max-width: 1155px)
and for the mobile view that I think would be ~600px just 1 column, 4 rows and your template should be grid-template-areas: "." "." "." ". ";
That is what I would try tbh, hope it helps.
1
