GridPanel

GridPanel in UIToolbox is a layout container with rows and columns, like CSS grid. Unity 6000.7.0a6 has the USS grid properties (display: grid, grid-template-columns and the others), but its layout engine ignores the track lists: all children go into one column. Unity 6000.6 has no USS grid. GridPanel does the layout in C# in each Unity 6 version. It has its own GridFlow enum, because the Unity GridAutoFlow enum is new in 6000.7.

<tb:GridPanel columns="110px 1fr 110px" rows="auto 1fr auto" gap="6" style="height: 130px;">
    <tb:GridCell column-span="3"><ui:Label text="Header" /></tb:GridCell>
    <ui:Label text="Sidebar" />
    <ui:Label text="Main" />
    <ui:Label text="Panel" />
    <tb:GridCell row="3" column="1" column-span="3"><ui:Label text="Footer" /></tb:GridCell>
</tb:GridPanel>

<tb:GridPanel columns="repeat(auto-fill, minmax(90px, 1fr))" auto-rows="36px" gap="6" />

<tb:GridPanel columns="110px 1fr 110px" rows="auto 1fr auto" areas="header header header; side main panel; footer footer footer">
    <tb:GridCell area="header"><ui:Label text="Header" /></tb:GridCell>
    <tb:GridCell area="side"><ui:Label text="Sidebar" /></tb:GridCell>
    <tb:GridCell area="main"><ui:Label text="Main" /></tb:GridCell>
    <tb:GridCell area="panel"><ui:Label text="Panel" /></tb:GridCell>
    <tb:GridCell area="footer"><ui:Label text="Footer" /></tb:GridCell>
</tb:GridPanel>

<tb:GridPanel columns="[left] 100px [middle] 1fr [right]" rows="[top] 40px [body-start] 1fr [body-end]">
    <tb:GridCell area="top / middle / body-start / right"><ui:Label text="Title" /></tb:GridCell>
    <tb:GridCell area="body / left"><ui:Label text="Menu" /></tb:GridCell>
</tb:GridPanel>

Member	Description
`Columns` (`columns`), `Rows` (`rows`)	The track lists. A track is pixels (`120` or `120px`), a percent (`25%`), a fraction of the free space (`1fr`), `auto` (the size of the content) or `minmax(min, max)`. `repeat(3, 1fr)` repeats tracks. `repeat(auto-fill, ...)` makes as many tracks as fit; `repeat(auto-fit, ...)` makes only as many as the items fill. An auto repeat needs a pixel or percent size. A track that the panel cannot read logs a warning.
`AutoRows` (`auto-rows`), `AutoColumns` (`auto-columns`)	The tracks of the rows and columns after the lists, in turn. `auto` by default.
Named lines	`[name]` between the tracks of `columns` or `rows` names a line: `[left] 100px [middle] 1fr [right]`. One bracket can hold more names: `[side-end main-start]`. A name used twice means its first line. A line after an auto repeat counts the repeated tracks. Named lines inside `repeat()` are not read; they log a warning.
`Areas` (`areas`)	Named areas, like CSS `grid-template-areas`: one string of names per row, split by `;` or in quotes (`"a a" "b c"` in C#). `.` is an empty cell. An area must be a rectangle; another shape logs a warning and is not used. An area `main` also names the lines `main-start` and `main-end` on both axes. Areas do not add tracks: the rows and columns come from the track lists and `AutoRows` and `AutoColumns`.
`RowGap` (`row-gap`), `ColumnGap` (`column-gap`), `Gap` (`gap`)	The space between the tracks in pixels. `Gap` sets both.
`AutoFlow` (`auto-flow`)	A `GridFlow`, with the values of CSS `grid-auto-flow`: `Row` fills each row first, `Column` fills each column first. `RowDense` and `ColumnDense` fill earlier holes with later items.
`JustifyItems` (`justify-items`), `AlignItems` (`align-items`)	The horizontal and vertical `GridAlignment` of the children in their areas: `Start`, `Center`, `End` or `Stretch` (the default).
`GridCell.Row` (`row`), `Column` (`column`), `RowSpan` (`row-span`), `ColumnSpan` (`column-span`)	A child with a set place. The row and column count from 1; 0 lets the panel pick. A cell with a row and a column is placed first.
`GridCell.Area` (`area`)	Like CSS `grid-area`: an area name, or `row-start / column-start / row-end / column-end`. Each line is a number from 1 or a name. A name finds `name-start` (or `name-end` for an end line) first, then `name`. A missing column start or end repeats a named start; a missing end after a number takes the span. An end before the start swaps them. It replaces `Row` and `Column`, and the span when it names both lines. A name that is not a line leaves that axis to the panel.
`GridCell.JustifySelf` (`justify-self`), `AlignSelf` (`align-self`)	The alignment of one cell. `Auto` takes the panel alignment.
`RowSizes`, `ColumnSizes`, `GetPlacement(child)`, `Refresh()`	The track sizes and the area of a child from the last layout. The panel lays out again by itself when the children, their sizes or the settings change.

The children are positioned absolutely. The panel sets its min height to its fixed and auto rows. Give the panel a height for fraction rows.
A stretched child gets a width or height from the panel. An inline width or height on the child stays.
In the UI Builder, the panel shows a dashed outline on each cell, labeled with its row and column numbers, such as "Row 1, Column 2", or with the name of its area. Use the numbers for row and column on a GridCell. The outlines do not show in Play mode or in a build.

Styling

Class	Element
`tb-grid-panel`	The panel. It has no look of its own.
`tb-grid-panel__cell`	A `GridCell`. It has no look of its own.

#GridPanel

#Styling

GridPanel

Styling