Pure HTML and CSS for manipulating grids, positions and more...

Community feedback

• 

  MariusT•35

  @MariusTNPosted about 4 years ago

  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