Are you by chance using Firefox? The thick blue lines are there because of “Display area names” and div.container being checked. The lines exist to help the developer in seeing the grid lines. You can change the color of the grid by clicking the colored circle next to div.contaier.
However, if you cannot see that panel, you can find it by clicking this toggle:
Now onto the meat of your question.
first baseline and
last baseline will change in behavior depending on the use of align or justify. Unless default behavior is changed, align-items will align grid items vertically within their cell; the top of the grid-item being its baseline, while justify-items will align grid items horizontally within their cell; the left of the grid-item being its baseline.
Now, in your example, if we use first baseline with justify-items, you can think of first like start. It’s going to look for the left-most border and justify the baseline of the grid-items to the left.
Now this doesn’t create much of a change from default behavior, but if I add margin-inline to item three, see what happens.
You can see that item one and two also shifted so they could remain along the same baseline.
Switching to last baseline, you can think of it like end. It’s going to look for the right-most border and justify the baseline of the grid-items to the right. Considering the width of each grid item is different, the results are already visible. You can see the little gaps to the right or item one and item two because their baselines are staying in line with item three and item four.
However, here lies the problem…Firefox is defaulting to start and end, showing a different result from Chrome and Edge, which I cannot find out why. I’ll be searching around for answers, and if I find anything, I’ll let you know.
Other than the Firefox issue, I hope this helps!