Here is a mockup I created: [https://codepen.io/axlemax/pen/zYKWPge]
It resembles the basic layout of Twitter desktop: [https://twitter.com/home]
https://i.sstatic.net/fZIVp.png
I am facing an issue with the "adcontainer" div (the one labeled as "what's happening" at the top). I want it to have a minimum height of 900px.
However, when I set the min-height to 900px, it affects the positioning of the 6 ad items within the div.
I tried different approaches like using "min-height: 900px" and changing "grid-template-rows: 15px auto;" to "grid-template-rows: 15px 900px;", but none of them worked as expected.
If anyone has a solution to this problem, I would greatly appreciate your help!
[Note: A Stack Snippet version is also available. However, I find the codepen version more user-friendly, but some users prefer Stack Snippets]
Your custom CSS code snippet here...<html>
<div class="container">
<!-- Your HTML structure goes here -->
</div>
</html>