My job is to supervise a junior developer, but I am mainly a javascript developer and my CSS skills are a bit basic. However, I spotted some things in his CSS code that seem unorthodox to me. He committed some CSS code similar to the one I post here:
<div class="label-item">
<div class="label-image-container">
<img src="www.aphoto.com"/>
</div>
<div class="label-info">
<span class="label-name">John</span>
<span class="description">John is an elephant</span>
<div>
<span class="size">1000 kg</span>
<span class="age">10 years old</span>
</div>
</div>
<div class="more-button">
<span> ... </span>
</div>
</div>
And the sass:
.label-item {
margin: .8rem;
display: grid;
grid-template-columns: 4.4rem 1fr 1.8rem;
grid-gap: 0 1rem;
background-color: grey;
align-items: center;
width: 300px;
height: 80px;
position: relative;
.label-image-container {
width: 50px;
height: 50px;
display: inline-block;
img {
max-width: 50px;
max-height: 50px;
float: left;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
}
}
.label-info {
display: grid;
position: relative;
grid-gap: .3rem;
.label-name {
font-size: 1.2rem;
line-height: 1.5rem;
height: 1.4rem;
}
.description, .size, .age {
font-size: 1rem;
display: inline-block;
float: left;
}
.age {
margin-left: .8rem;
float: right;
}
}
.more-button {
height: 100%;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
grid-row-end: span 1;
}
}
this is a codepen of this code: https://codepen.io/anon/pen/QXadMP
My questions are:
a. Is grid positioning appropriate to alight and place elements inside a div that is not the main website container. I know that it works, but is this best practice?
b. Is nested grids considered to be best practice (.label-info inside .label item)?
c. Is using 'display: flex' appropriate to use just to align the content of a div in center?