In the world of React components, there exists a card representation within a grid view that adapts based on available screen space;
function EngineerCard(engineer: EngineerDetail) {
return (
<div className='engineerCard'>
<div>
<img src={engineer.avatar}/>
</div>
<div>
<h4>{engineer.name}</h4>
<h5>{engineer.role}</h5>
<p>{engineer.summary}</p>
</div>
<div>
<button>f</button>
<button>in</button>
<button>g</button>
</div>
</div>
);
}
Utilizing CSS in this manner;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.engineerCard {
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #2F2c34;
width: 250px;
height: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10px;
}
.engineerCard img {
margin-left: auto;
margin-right: auto;
width: 128px;
height: 128px;
border-radius: 50%;
}
.engineerCard button {
width: 20px;
height: 20px;
border: none;
background-color: #fff;
margin-left: 10px;
}
.engineerCard button:hover {
cursor: pointer;
}
.engineerCard:last-child {
background-color: #dfe432;
height: 30px;
width: 250px;
}
This results in the following appearance;
https://i.sstatic.net/sxlEU.png
What causes the yellow footer of the card to be misaligned while its buttons are perfectly positioned?
Why is the background of the second card white instead of the specified color?
Why doesn't the CSS property
justify-content: space-around;take effect on the second card?