Испытание: Визитка неопознанного енота

Курсы
1

Подскажите пожалуйста, что не так с кодом. Почему телефон не выставлется как нужно?

.raccoon-card {width: 490px;
margin: 0;
padding: 20px;
display: grid;
grid-template-areas: “avatar name name” “avatar email phone” “skills skills qr”;
}

.name { grid-area: name; width: 320px; align-self: center;}
.avatar {grid-area: avatar; width: 100px; height: 100px;}
.phone {grid-area: phone; width: 200px; align-self: center; justify-self: end;}
.email {grid-area: email; width: 150px; align-self: center; }
.skills {grid-area: skills; width: 320px; margin-bottom: 0px; margin-top: 20px;}
.qr {grid-area: qr; width: 100px; align-self: end; justify-self: end; margin-right: 60px;}

Без имени
Без имени1366×768 185 KB

2

Не нужно каждому прописывать ширину. Достаточно прописать ширину всей карточки и разметить ряды, указав каждому ширину. Обязательно нужно прописать gap, и тогда у некоторых можно убрать лишние выравнивания.
Вот мой код на 100%:
.raccoon-card {
width: 490px;
padding: 20px;
display: grid;
grid-template-columns: 100px 200px 150px;
gap: 20px;
grid-template-areas: “avatar name name”
“avatar email phone”
“skills skills qr”;
}

.avatar {
grid-area: avatar;
}

.name {
grid-area: name;
align-self: end;
}

.phone {
grid-area: phone;
}

.email {
grid-area: email;
}

.skills {
grid-area: skills;
}

.qr {
grid-area: qr;
align-self: end;
justify-self: end;
}