[csswg-drafts] [css-grid-2] Example 5 - Multiple issues (#11848)

gitspeaks has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid-2] Example 5 - Multiple issues ==
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. 
>
> ```css
> 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.

Suggested revision:

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11848 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 6 March 2025 14:29:26 UTC