Help me understand justify-items: first baseline or last baseline

I understood the baseline when I try to use “align-items” property to bring all text inside the items on the baseline, but I am a bit confused regarding the justify-items property. I understand that there is not a lot of text in my boxes and that justify-items is a property that positions grid items along the inline, or row, axis. Though, when I looked at the firefox grid lines, I noticed that ‘first baseline’ value brings the items near the start of the area. While the ‘last baseline’ value brings the items near the end of the area:

and justify-items: last baseline;

Can anyone help me understand what is going on? Why the items justify themselves near the dark blue lines which seem to be the start or end of an area? Please help me understand this because I learned about waht baseline is in typography. This behavior is very different.

Thank you!! :smiling_face: :wave:

Hi there!

justify-items aligns grid items horizontally within their parent. However, the result I see for justify-items: last baseline confuses me because it does not show what I would expect it to.

For example, look at what I have created:

You can see that item one, item three, item two, and item four are all aligned last—toward the end of their parent container. But you can see a small gap after item one and item two because the baseline ensures that the text is also aligned. However, this is where my confusion stems because I do not see the same behavior in your example. Could you provide your HTML and CSS so I could see why yours is behaving differently?

1 Like

Here is my HTML:

<body>

        <div class="container">

            <div class="item one">Item One</div>
            <div class="item two">Item Two</div>
            <div class="item three">Item Three</div>
            <div class="item four">Item Four</div>

        </div>
</body>
       

And here is my CSS:

.container {
    border: 2px solid goldenrod;
    display: grid;
    height: 600px;
    width: 600px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: 
    "a a a b b"
    "a a a b b"
    "c c c d d"
    "c c c d d"
    "e e e e e";
    justify-items: first baseline;
}
.item {
    border: 1px solid black;
    border-radius: 5px;
    height: 70px;
}

.one {
    background-color: lightblue;
    grid-area: a;
    
}

.two {
    background-color: lightgoldenrodyellow;
    grid-area: d;
    
}

.three {
    background-color: lightgrey;
    grid-area: c;

}

.four {
    background-color: lightpink;
    grid-area: e;
    
}

Please do help me understand what ‘first baseline’ and ‘last baseline’ do and why are there darker blue lines in the grid. I read this passage as well at w3.org:

"Find the first (last) row of the grid container containing at least one grid item.
If any of the grid items intersecting this row participate in baseline alignment in that row, the grid container’s baseline set is generated from the shared alignment baseline of those grid items.

Otherwise, the grid container’s first (last) baseline set is generated from the alignment baseline of the first (last) grid item in row-major grid order (according to the writing mode of the grid container). If the grid item has no alignment baseline in the grid’s inline axis, then one is first synthesized from its border edges."

does it have something to do with what I am working on? This paragraph is full of technical terms.

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.
image

However, if you cannot see that panel, you can find it by clicking this toggle:
image

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!

1 Like

thank you!

I tried justify: last baseline and first baseline with <p> <span> and <img> elements. So far, I have learned that:

this is when I can see that the grey container is justifying itself to be meet the last baseline of the blue container.

  • I also learned that items justify themselves according to the writing mode. I am still learning left-right writing mode. But may be once I remember things more I will switch to my own language’s writing mode which is right to left.
  • I also learned that by “last baseline” the value will look at the last line in the text and justify items accordingly. Similarly, first baseline means items will look at the baseline of the text in the first line or row (in case of justify-items) and justify the rest of the text accordingly. I am not sure though, how it works for images. And if I am right in interpreting the “first” and “last” values correctly. So, if this is wrong, please do correct me.
  • Furthermore, as for the fallback baseline, if there is nothing inside the relevant container, then the border edges of the container will become the baselines. So, if that is correct, then in case of the left-right writing mode, the left border edge of the parent container would justify-items: first baseline to the left side? and last baseline would be near the end of the container with child text aligned toward the left side according to the English writing mode?

I found this article to be helpful too, though it talks about align-items:

lastly, your answer was extremely helpful. you are right, google and firefox show very different results. I am glad that you pointed it out because I was only trying to see the difference using firefox. I will now look at both browsers. Thank you for that!

Q) what use-cases are there for first baseline and last baseline? Because it is very hard to find anyone talking about it online. The most frequent results were for these values: start, end, center.

Sure, when you find out why these browsers show different results, please do let me know, thank you sensei! :star_struck:

update:
I found this on mdn web docs:

Baseline content alignment — specifying a baseline alignment value for justify-content or align-content — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.

Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using justify-self or align-self, or when setting these values as a group with justify-items and align-items.

it sounds like the justify-content and align-content properties align the baselines according to the padding inside the boxes that is given to the content of the boxes. And the justify-self or justify-items or align-self or align-items is used to align the baselines of the boxes using their margins, which are outside. So, if I understood this correctly, the justify-items: last baseline would mean justify the margins? what is the last margin then? Is it where the lines end in English text, so, the right side?