What Is Difference Between Justify-Self, Justify-Items and Justify-Content in CSS Grid

#container {  display: flex;  justify-content: space-between;  background-color: lightyellow;}.box {  height: 50px;  width: 75px;  background-color: springgreen;}.box1 {  width: 100px;}.box3 {  width: 200px;}#center {  text-align: center;  margin-bottom: 5px;}#center > span {  background-color: aqua;  padding: 2px;}

<div id="center">  <span>TRUE CENTER</span></div>
<div id="container">  <div class="box box1"></div>  <div class="box box2"></div>  <div class="box box3"></div></div>
<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

What is the purpose of flex-start and flex-end on justify-items and justify-self?

This is an error. The justify-items and justify-self properties do not apply in flexbox.

Consider your source of information: MDN Web Docs (formerly Mozilla Developer Network). This resource, although normally useful and reliable, nonetheless represents second hand information.

The CSS definitions on MDN pages are based on official W3C documentation. MDN contributors (people) read, filter and interpret W3C data for presentation on MDN. As a result, MDN info is subject to human error. That's the problem here.

If you go directly to the spec, you'll find the correct information:

7.1. Inline/Main-Axis Alignment: the justify-items
property

This property specifies the default justify-self for all of the
child boxes (including anonymous boxes) participating in this box’s
formatting context.

Okay. So let's go to justify-self.

6.1. Inline/Main-Axis Alignment: the justify-self
property

Applies to: block-level boxes, absolutely-positioned boxes, and grid items

As noted, justify-items and justify-self do not apply to flex items.

Also note that justify-items and justify-self are applicable to multiple box models, not just CSS Grid. For more details see the CSS Box Alignment Module specification.

What is the difference between align-items vs. align-content in Grid Layout?

Let's start with clarifying the terminology:

Grid Container

The grid container is the overall container for the grid and grid items. It establishes the grid formatting context (as opposed to another formatting context, such as flex or block).

Grid

The grid is a group of intersecting vertical and horizontal lines that divides the grid container’s space into grid areas, which are boxes that contain grid items.

Grid Items

Grid items are boxes in a grid container that represent in-flow content (i.e., content that is not absolutely positioned).

Here's an illustration from the W3C:

The justify-content and align-content properties align the grid.

The justify-self, justify-items, align-self and align-items properties align the grid items.

With regard to the problem described in your question:

My confusion revolves around the claim made by the author that the "-content" set are there because: "Sometimes the total size of your grid might be less than the size of its grid container"

Well, you can see in the illustration that the grid is smaller than the grid container.

As a result, there is space remaining and the container is able to distribute this space to vertically center (align-content: center) and right-align (justify-content: end) the grid.

The extra space could also allow the grid to be spaced apart with values such as space-around, space-between and space-evenly.

However, if the grid size equaled the container size, then there would be no free space, and align-content / justify-content would have no effect.

Here's more from the spec:

10.3. Row-axis Alignment: the justify-self and justify-items
properties

Grid items can be aligned in the inline dimension by using the
justify-self property on the grid item or justify-items property
on the grid container.

10.4. Column-axis Alignment: the align-self and align-items
properties

Grid items can also be aligned in the block dimension (perpendicular
to the inline dimension) by using the align-self property on the
grid item or align-items property on the grid container.

10.5. Aligning the Grid: the justify-content and align-content
properties

If the grid’s outer edges do not correspond to the grid container’s
content edges (for example, if no columns are flex-sized), the grid
tracks are aligned within the content box according to the
justify-content and align-content properties on the grid
container.

^{(emphasis added)}

Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

The MDN is not accurate here as there is no baseline for justify-content

If you check the actual Flexbox specification you will see that there is no baseline value for justify-content

Value:  flex-start | flex-end | center | space-between | space-around

In the near future and as defined in the CSS Box Alignment Module Level 3 we will have more generic way to align elements and even there baseline is a not a valid value of justify-content

Value:  normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end

By the way, there is baseline for justify-items in the new specificiation: https://drafts.csswg.org/css-align-3/#propdef-justify-items but this property doesn't exist in the actual Flexbox specification (same for justify-self)

Related: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

align-content doesn't accept baseline with Flexbox (https://drafts.csswg.org/css-flexbox-1/#align-content-property) but it does in the New Specification

The same apply for CSS grid but you can find justify-items and justify-self there: https://www.w3.org/TR/css-grid-1/#row-align

Actually I don't have a clear example to illustrate the baseline with those properties but I am pretty sure in most of the case it will consider a fallback value as defined in the Spec:

Unexpected behaviour of grid items using justify-content property

From the specification

If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

So if any column is using 1fr, justify-content is useless.

To use easy words: You grid container contain tracks (columns) that are sized either based on grid-template-columns or automatically. When using 1fr 1fr 1fr 1fr You define 4 equal tracks taking all the available space. There is no free space so there is nothing to align because justify-content align the columns not the item inside them (that are equal to 20px).

When you don't define any size, the columns will get auto sized based on their content and in this case you will have tracks having their size equal to 20px and inside them items also equal to 20px. In this case, justify-content will align your columns.

Worth to note that the default alignment is stretch so in the second case if you omit the justify-content, your auto sized column will be stretched to fill all the space equally to have a similiar behavior as 1fr.

to better understand, here is some illustration:

.grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  margin: 1em;
  background-color: powderblue;
}

.grid__item {
  width: 20px;
  padding: 0.6em;
  background-color: lime;
}

4 equal columns
<div class="grid" style="grid-template-columns: 1fr 1fr 1fr 1fr">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
4 equal columns having 100px width (we have free space)
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

we align the items inside the columns
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
we move the columns to the end
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;
  justify-content: end;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
We make the column auto sized (nothing to align inside them)
<div class="grid" style="justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>