Hallo im Moment arbeite ich an einer spaß Website für die schule und habe ein kleines Grid Problem bzw. bin ahnungslos.
Ich habe problem bei der positionierung von einem span text
Hier der Code:
<div class="teilnehmer-profile">
<div class="item-1"><img src="ardymon.jpg" width="100" height="100"></div>
<div class="item-2"><span class="name">Ardymon</span></div>
<div class="item-staffel"><span class="name">Staffel:</span></div>
<div class="item-3"><a href="https://www.youtube.com/Ardymon"> <img src="youtubeicon.jpg" width="30" height="30"> </a></div>
<div class="item-4"><a href="https://www.twitch.tv/ardy_v2"> <img src="twitchicon.jpg" width="30" height="30"> </a></div>
</div>
So siehts bis jetzt aus:

Und so möchte ich das es aussieht:

Zu dem grid hier der CSS code:
.item-1 {
grid-area: bild;
box-shadow: 2px 2px 30px 6px black;
}
.item-2 {
grid-area: name;
}
.item-staffel {
grid-area: staffel;
}
.item-3 {
grid-area: youtube;
}
.item-4 {
grid-area: twitch;
}
Item-1 = Bild
item-2 = name
item-staffel = die staffel angabe
item-3 = youtube link
item-4 = twitch link
-------------------------------------------------------------------------------------------------------------------------------------
Wichtig hierbei ist das falls jemand mir einen passenden code schreibt das er bedenkt das im Rot makierten Bereich noch etwas hingeschrieben werden soll bzw. ein Bild mit link
-------------------------------------------------------------------------------------------------------------------------------------
Ps: was auch schön wäre ist ich habe bei den YouTube und Twitch Bildern immer einen Riesen abstand dazwischen machen müssen das die links erkannt werden und ich möchte eigentlich das die "icons" nebeneinander sind aber trotzdem einen link hinterlegt haben.
hierzu der css code:
.teilnehmer-profile {
display: grid;
grid-template-columns: 100px 140px 30px 100px;
grid-auto-rows: minmax(80px, auto);
grid-template-rows: 100px;
grid-auto-rows: 100px;
grid-auto-flow: column;
grid-auto-columns: 200px;
justify-content: center;
grid-template-areas:
"bild name staffel youtube twitch";
}
Ich wäre demjenigen so dankbar weil er mir aus der patsche hilft
DANKE und LG Benji