[css-grid-2] Example 5 - Multiple issues

[gitspeaks]

Section 2.3 starts with the following example:

The following example justifies all columns by distributing any extra space among them, and centers the grid in the grid container when it is smaller than 100vh.

main {
  grid: auto-flow 1fr / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
}

Issues:

1. The example omits setting display: grid on the <main> element, which means the grid properties are not applied.

2. The example sets the implicit grid rows to 1fr, which causes each row (or even a single row) to expand to fill the available vertical space dictated by min-height: 100vh. Regardless of whether there is one row or multiple rows, all the rows take up the full available height, leaving no extra vertical space for the align-content: safe center property to have an effect.

3. The declaration repeat(auto-fill, 5em) creates as many 5em-wide columns as will fit along the inline axis, effectively consuming all available inline space. This means there is no leftover free space for justify-content: space-between to distribute among the columns, contrary to what the example’s description implies.

Suggested revision:

The following example vertically centers the grid in the grid container when it is smaller than 100vh.

  main {
    display: grid;
    grid: auto-flow auto / repeat(auto-fill, 5em);
    min-height: 100vh;
    align-content: safe center;
  }

[fantasai]

Thanks for the error report! Fixed the first two errors. For the third one, if the width of the container isn't perfectly divisible by 5em, it will in fact justify by distributing the extra space between those 5em columns. So I left that part alone, but did clarify the wording.

Let me know if there's anything left to fix! Otherwise I'll consider this issue resolved. :)

[gitspeaks]

For the third one, if the width of the container isn't perfectly divisible by 5em, it will in fact justify by distributing the extra space between those 5em columns.

Yeah, the thing is, in any practical testing, the leftover space is usually tiny—so the end effect is barely noticeable. That’s why I said it effectively consumes all available inline space.

I just don’t think a subtle, hard-to-see behavior makes for a good example.

[fantasai]

That's fair. How about we make the columns wider, e.g. 20em?

[gitspeaks]

Sounds good to me, 20em should work well!