CSS Grid prop justify content missing several values

[thewebartisan7]

The Grid component prop justify is missing several values like stretch, normal etc... and has a default value of flex-start, which then make the grid childs not fit whole width.

Results of below example with header, sidebar and main content is in below screenshot:

            <Grid
                rows="75px auto"
                columns="350px auto"
                // Need to override default justify content with inline style since prop justify missing it:
                style={{ justifyContent: "normal" }}
            >
                <Flex direction="column" gridRow="1" gridColumn="1/3">
                    Header
                </Flex>

                <Flex
                    gridRow="2"
                    gridColumn="1"
                    direction="column"
                >
                    Sidebar
                </Flex>

                <Flex gridRow="2" gridColumn="2" direction="column">
                    Main
                </Flex>
            </Grid>

Result (the yellow is the main grid:

Expected:

Would be also better to have a different default than flex-start.

[vladmoroz]

You could just do columns=350px 1fr", that's more explicit and achieves what you are trying to achieve out of the box.

Not sure about changing the default, but we'll look into the missing values.

[thewebartisan7]

Ah yes, I see! Thank you. However yes adding that missing values would also be good.