It's probably better to use flex-sizing here: grid-template-columns: 1fr 1fr 1fr; (three columns with the same flex factor = the same width)

fixed, thank you :)

I don't think display: row; exists. You're probably looking for display: block;, but if you're doing that you should probably use a div instead of span

Or are you trying do make the span behave like a table, in that case it's display: table-row;

I tried 'millions' of options looking for a way to display the contributions block in three columns having picture, name and number in separate rows. Gave it up for now since the focus is the js anyway :))

As in week 1 I'm not a fan of this html structure as it doesn't provide any clue how to group the items. See linked comment for more details.

I'm kind of following what you want to do here, but would prefer another solution (this one doesn't use semantic html and isn't easy to understand):

I'm assuming a html-strucuture like this:

<div class="container contributors">
  <h2>Contributors</h2>
  <ul class="forContributorsBlock">
    <li class="contributor">
      <a href="...">contributor name</a>
      <img src="..." />
      <span>5</span>
    </li>
  </ul>
</div>

.contributors {
 color: rgb(48, 0, 20);
 margin: ...;
 padding: ...;
 border: ...;
}

.forContributorsBlock {
 list-style: none;
}

Oh, yes that would be awesome to achieve. I think I still need to practice more DOM manipulations to be able to complete this one :(

I'm still missing:

1. Data is loaded for the first repository when the app/page loads
2. The repos are sorted by name

Sorted by name, still thinking how to start the first repo onload

Sorting looks good! Let me know if you need any pointers for first repo onload.

yes, please

What you need to do is basically the following:

1. Move the function that you send in as a callback to the eventhandler on line 53 to a separate function
2. Call this function in the event-handler on line 53
3. Call this function when the page loads

Is it clearer how to proceed?