I have encountered an issue with the alignment in a list using mat-card.
Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg
Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg
The problem arises when the size of content inside a mat card increases. The next mat card should adjust its space automatically without leaving a blank space corresponding to the previously larger mat card.
Below is the relevant CSS and HTML code:
.works {
padding-left: 47px;
padding-top: 99px;
// display: inline-flex;
}
.work-head {
// width: 330px;
// height: 28px;
font-family: Raleway-SemiBold;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
...
</div>