Nested Grid Layout

Product: PowerShell Universal
Version: 3.8.9

I been having issue with a trying to do a nested grid layout when I nest the grid I expect the grid to fill within the column like below.

But this is what I get when I try to do the nested grid instead

Has anyone experience this before and know a solution?

Code below:

        New-UDGrid -Container -Content {
            New-UDGrid -Item -LargeSize 8 -Content {
                New-UDGrid -Item -LargeSize 6 -Content {
                    New-UDPaper -Content { "nested grid item inside grid"  } -Elevation 2
                }
                New-UDGrid -Item -LargeSize 6 -Content {
                    New-UDPaper -Content { "nested grid item inside grid" } -Elevation 2
                }
                New-UDGrid -Item -LargeSize 6 -Content {
                    New-UDPaper -Content { "nested grid item inside grid"  } -Elevation 2
                }
                New-UDGrid -Item -LargeSize 6 -Content {
                    New-UDPaper -Content { "nested grid item inside grid" } -Elevation 2
                }
                New-UDGrid -Item -LargeSize 6 -Content {
                    New-UDPaper -Content { "nested grid item inside grid"  } -Elevation 2
                }
                New-UDGrid -Item -LargeSize 6 -Content {
                    New-UDPaper -Content { "nested grid item inside grid" } -Elevation 2
                }
            }
            New-UDGrid -Item -LargeSize 4 -Content {
                New-UDPaper -Content { "non nested grid item" } -Elevation 2
                New-UDPaper -Content { "non nested grid item" } -Elevation 2
                New-UDPaper -Content { "non nested grid item" } -Elevation 2
                New-UDPaper -Content { "non nested grid item" } -Elevation 2
                New-UDPaper -Content { "non nested grid item" } -Elevation 2
            }
        }

I suspect the nested grid is adding CSS properties like margin, padding etc to extend the width of the cells by at least a pixel.

I currently have the same problem, which goes away when I turn off my CSS stylesheet.

Figured out the solution. You have to initialize another grid inside the nested grid for the col to take effect.

Put code you’d like to run during dashboard startup here.

New-UDDashboard -Title ‘PowerShell Universal’ -Pages @(
# Create a page using the menu to the right →
# Reference the page here with Get-UDPage
New-UDPage -Name ‘Home’ -Content {
New-UDGrid -Id ‘grid0’ -Container -Content {
New-UDGrid -Id ‘item0’ -Item -ExtraSmallSize 6 -SmallSize 7 -MediumSize 8 -LargeSize 8 -Content {
New-UDGrid -Id ‘grid0-1’ -Container -Content {
New-UDGrid -Id ‘grid0-1–item0’ -Item -ExtraSmallSize 12 -SmallSize 12 -MediumSize 6 -LargeSize 4 -ExtraLargeSize 3 -Content {
New-UDPaper -Content { “Tool 1” } -Elevation 2
}
New-UDGrid -Id ‘grid0-1–item1’ -Item -ExtraSmallSize 12 -SmallSize 12 -MediumSize 6 -LargeSize 4 -ExtraLargeSize 3 -Content {
New-UDPaper -Content { “Tool 2” } -Elevation 2
}
New-UDGrid -Id ‘grid0-1–item2’ -Item -ExtraSmallSize 12 -SmallSize 12 -MediumSize 6 -LargeSize 4 -ExtraLargeSize 3 -Content {
New-UDPaper -Content { “Tool 3” } -Elevation 2
}
New-UDGrid -Id ‘grid0-1–item3’ -Item -ExtraSmallSize 12 -SmallSize 12 -MediumSize 6 -LargeSize 4 -ExtraLargeSize 3 -Content {
New-UDPaper -Content { “Tool 4” } -Elevation 2
}
New-UDGrid -Id ‘grid0-1–item4’ -Item -ExtraSmallSize 12 -SmallSize 12 -MediumSize 6 -LargeSize 4 -ExtraLargeSize 3 -Content {
New-UDPaper -Content { “Tool 5” } -Elevation 2
}
New-UDGrid -Id ‘grid0-1–item5’ -Item -ExtraSmallSize 12 -SmallSize 12 -MediumSize 6 -LargeSize 4 -ExtraLargeSize 3 -Content {
New-UDPaper -Content { “Tool 6” } -Elevation 2
}
}
}
New-UDGrid -Id ‘item1’ -Item -ExtraSmallSize 6 -SmallSize 5 -MediumSize 4 -LargeSize 4 -Content {
New-UDPaper -Content { “non nested grid item” } -Elevation 2
New-UDPaper -Content { “non nested grid item” } -Elevation 2
New-UDPaper -Content { “non nested grid item” } -Elevation 2
New-UDPaper -Content { “non nested grid item” } -Elevation 2
New-UDPaper -Content { “non nested grid item” } -Elevation 2
}
}
}
)

3 Likes