Here is my dilemma:
I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights.
The rows will be determined by the number of grid items, which are represented as UI cards. The goal is for these cards to fill the entire height of their respective cell without altering the overall row height. Essentially, the maximum height of each card should match the height assigned to the row by the grid.
Each card consists of three components: Header, Body, and Footer. The body component must be scrollable in case it contains more list items than the row height allows.
I have attempted to implement this concept on stackblitz
https://stackblitz.com/edit/angular-3gkmtm
However, I am facing some challenges:
- The cards stretch the row when additional items are added
- I am trying to achieve a scrollable body section within the card without manually setting a fixed height
- When there are more than 3 rows, an overflow issue occurs
I would greatly appreciate any assistance!
<article>
<section>
<h2>Fixed Grid with Scrollable Cards</h2>
</section>
[...]
In summary, I want to maintain a responsive grid layout where each card dynamically adjusts its height based on the content, while also enabling scroll functionality if needed.
Thank you for your help!
[...]
global style
html , body{
height: 100vh;
overflow: hidden;
}