Currently, I am working on my portfolio in Angular and focusing on the skill page. I have a list of skills organized into categories, with each category displayed in its own box. The number of skills and progress for each category varies. Previously, the skill section was not a separate component, so if one box had fewer skills than another in the row, empty space would be added to ensure all elements in the row had the same height. However, now that I have converted the div into a component, the items(components) in the row have different heights based on their content.
Before:
<div class="flex-container">
<div class="skill-section">
<h3> Skill title</h3>
<app-skill-progress></app-skill-progress>
<app-skill-progress></app-skill-progress>
<app-skill-progress></app-skill-progress>
</div>
<div class="skill-section">
<h3> Skill title</h3>
<app-skill-progress></app-skill-progress>
<app-skill-progress></app-skill-progress>
</div>
</div>
After:
<div class="flex-container">
<app-skill-section></app-skill-section> // has 3 skills inside
<app-skill-section></app-skill-section> // has 2 skills inside
</div>
Below are the styles for the classes:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.skill-section {
width: 560px;
margin-bottom: 35px;
margin-right: 30px;
border-radius: 8px;
padding: 24px 16px;
background-color: #fff;
box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
position: relative;
}