docs: grid (#552)

Closes #533 

TextField component seems to have a default minimum width. The other
items in the grid adjust to the column size I define. Checking to see if
this is an intended behaviour or something wrong with the Grid component

```
from deephaven import ui
@ui.component
def my_input():
    text, set_text = ui.use_state("hello")
    count, set_count = ui.use_state(0)

    return ui.grid(
        ui.action_button(
            f"You pressed me {count} times", on_press=lambda _: set_count(count + 1)
        ),
        ui.text_field(value=text, on_change=set_text),
        ui.text(f"You typed {text}"),
        rows="100px 10px 10px",
        columns="10px"
    )


result = my_input()
```

<img width="220" alt="image"
src="https://github.com/deephaven/deephaven-plugins/assets/55671206/1b685036-1bec-41f6-9d44-02dc87172695">

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -3,7 +3,6 @@
 from .action_menu import action_menu
 from .basic import (
     component_element,
-    grid,
     heading,
     icon_wrapper,
     illustrated_message,
@@ -25,6 +24,7 @@
 from .date_picker import date_picker
 from .flex import flex
 from .fragment import fragment
+from .grid import grid
 from .icon import icon
 from .item import item
 from .item_table_source import item_table_source

plugins/ui/src/deephaven/ui/components/basic.py

@@ -12,14 +12,6 @@ def component_element(name: str, /, *children: Any, **props: Any) -> BaseElement
     return BaseElement(f"deephaven.ui.components.{name}", *children, **props)
 
 
-def grid(*children, **props):
-    """
-    Python implementation for the Adobe React Spectrum Grid component.
-    https://react-spectrum.adobe.com/react-spectrum/Grid.html
-    """
-    return component_element("Grid", *children, **props)
-
-
 def heading(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Heading component.

plugins/ui/src/deephaven/ui/components/grid.py

@@ -0,0 +1,190 @@
+from __future__ import annotations
+from typing import Any
+from .types import (
+    # Layout
+    AlignSelf,
+    CSSProperties,
+    DimensionValue,
+    JustifySelf,
+    LayoutFlex,
+    Number,
+    Position,
+    GridFlow,
+    JustifyItems,
+    JustifyContent,
+    AlignContent,
+    AlignItems,
+)
+from .basic import component_element
+from ..elements import Element
+
+
+def grid(
+    *children: Any,
+    areas: list[str] | None = None,
+    rows: str | list[DimensionValue] | None = None,
+    columns: str | list[DimensionValue] | None = None,
+    auto_columns: DimensionValue | None = None,
+    auto_rows: DimensionValue | None = None,
+    auto_flow: GridFlow | None = None,
+    justify_items: JustifyItems | None = None,
+    justify_content: JustifyContent = "stretch",
+    align_content: AlignContent = "start",
+    align_items: AlignItems = "stretch",
+    gap: DimensionValue | None = None,
+    column_gap: DimensionValue | None = None,
+    row_gap: DimensionValue | None = None,
+    flex: LayoutFlex | None = None,
+    flex_grow: Number | None = None,
+    flex_shrink: Number | None = None,
+    flex_basis: DimensionValue | None = None,
+    align_self: AlignSelf | None = None,
+    justify_self: JustifySelf | None = None,
+    order: Number | None = None,
+    grid_area: str | None = None,
+    grid_row: str | None = None,
+    grid_row_start: str | None = None,
+    grid_row_end: str | None = None,
+    grid_column: str | None = None,
+    grid_column_start: str | None = None,
+    grid_column_end: str | None = None,
+    margin: DimensionValue | None = None,
+    margin_top: DimensionValue | None = None,
+    margin_bottom: DimensionValue | None = None,
+    margin_start: DimensionValue | None = None,
+    margin_end: DimensionValue | None = None,
+    margin_x: DimensionValue | None = None,
+    margin_y: DimensionValue | None = None,
+    width: DimensionValue | None = None,
+    height: DimensionValue | None = None,
+    min_width: DimensionValue | None = None,
+    min_height: DimensionValue | None = None,
+    max_width: DimensionValue | None = None,
+    max_height: DimensionValue | None = None,
+    position: Position | None = None,
+    top: DimensionValue | None = None,
+    bottom: DimensionValue | None = None,
+    start: DimensionValue | None = None,
+    end: DimensionValue | None = None,
+    left: DimensionValue | None = None,
+    right: DimensionValue | None = None,
+    z_index: Number | None = None,
+    is_hidden: bool | None = None,
+    id: str | None = None,
+    UNSAFE_class_name: str | None = None,
+    UNSAFE_style: CSSProperties | None = None,
+) -> Element:
+    """
+    A layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing.
+
+    Args:
+        children: The content to render within the container.
+        areas: The named grid areas to use for the grid.
+        rows: The row sizes for the grid.
+        columns: The column sizes for the grid.
+        auto_columns: The size of auto-generated columns.
+        auto_rows: The size of auto-generated rows.
+        auto_flow: The flow direction for auto-generated grid items.
+        justify_items: The defailt justify_self for all items in the grid.
+        justify_content: The distribution of space around items along the main axis.
+        align_content: The distribution of space around items along the cross axis.
+        align_items: The alignment of children within their container.
+        gap: The gap between rows and columns.
+        column_gap: The gap between columns.
+        row_gap: The gap between rows.
+        flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
+        flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available.
+        flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available.
+        flex_basis: When used in a flex layout, specifies the initial main size of the element.
+        align_self: Overrides the alignItems property of a flex or grid container.
+        justify_self: Species how the element is justified inside a flex or grid container.
+        order: The layout order for the element within a flex or grid container.
+        grid_area: When used in a grid layout, specifies the named grid area that the element should be placed in within the grid.
+        grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid.
+        grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid.
+        grid_row_start: When used in a grid layout, specifies the starting row to span within the grid.
+        grid_row_end: When used in a grid layout, specifies the ending row to span within the grid.
+        grid_column_start: When used in a grid layout, specifies the starting column to span within the grid.
+        grid_column_end: When used in a grid layout, specifies the ending column to span within the grid
+        margin: The margin for all four sides of the element.
+        margin_top: The margin for the top side of the element.
+        margin_bottom: The margin for the bottom side of the element.
+        margin_start: The margin for the logical start side of the element, depending on layout direction.
+        margin_end: The margin for the logical end side of the element, depending on layout direction.
+        margin_x: The margin for the left and right sides of the element.
+        margin_y: The margin for the top and bottom sides of the element.
+        width: The width of the element.
+        min_width: The minimum width of the element.
+        max_width: The maximum width of the element.
+        height: The height of the element.
+        min_height: The minimum height of the element.
+        max_height: The maximum height of the element
+        position: The position of the element.
+        top: The distance from the top of the containing element.
+        bottom: The distance from the bottom of the containing element.
+        left: The distance from the left of the containing element.
+        right: The distance from the right of the containing element.
+        start: The distance from the start of the containing element, depending on layout direction.
+        end: The distance from the end of the containing element, depending on layout direction.
+        z_index: The stack order of the element.
+        is_hidden: Whether the element is hidden.
+        id: The unique identifier of the element.
+        UNSAFE_class_name: A CSS class to apply to the element.
+        UNSAFE_style: A CSS style to apply to the element.
+    """
+    return component_element(
+        "Grid",
+        children=children,
+        areas=areas,
+        rows=rows,
+        columns=columns,
+        auto_columns=auto_columns,
+        auto_rows=auto_rows,
+        auto_flow=auto_flow,
+        justify_items=justify_items,
+        justify_content=justify_content,
+        align_content=align_content,
+        align_items=align_items,
+        gap=gap,
+        column_gap=column_gap,
+        row_gap=row_gap,
+        flex=flex,
+        flex_grow=flex_grow,
+        flex_shrink=flex_shrink,
+        flex_basis=flex_basis,
+        align_self=align_self,
+        justify_self=justify_self,
+        order=order,
+        grid_area=grid_area,
+        grid_row=grid_row,
+        grid_row_start=grid_row_start,
+        grid_row_end=grid_row_end,
+        grid_column=grid_column,
+        grid_column_start=grid_column_start,
+        grid_column_end=grid_column_end,
+        margin=margin,
+        margin_top=margin_top,
+        margin_bottom=margin_bottom,
+        margin_start=margin_start,
+        margin_end=margin_end,
+        margin_x=margin_x,
+        margin_y=margin_y,
+        width=width,
+        height=height,
+        min_width=min_width,
+        min_height=min_height,
+        max_width=max_width,
+        max_height=max_height,
+        position=position,
+        top=top,
+        bottom=bottom,
+        start=start,
+        end=end,
+        left=left,
+        right=right,
+        z_index=z_index,
+        is_hidden=is_hidden,
+        id=id,
+        UNSAFE_class_name=UNSAFE_class_name,
+        UNSAFE_style=UNSAFE_style,
+    )

plugins/ui/src/deephaven/ui/components/types/layout.py

@@ -104,6 +104,27 @@
     "stretch",
 ]
 
+JustifyItems = Literal[
+    "auto",
+    "normal",
+    "start",
+    "end",
+    "center",
+    "left",
+    "right",
+    "stretch",
+    "self-start",
+    "self-end",
+    "baseline",
+    "first baseline",
+    "last baseline",
+    "safe center",
+    "unsafe center",
+    "legacy right",
+    "legacy left",
+    "legacy center",
+]
+
 OverflowMode = Literal["wrap", "collapse"]
 
 Alignment = Literal["start", "end"]
@@ -132,6 +153,7 @@
 LabelPosition = Literal["top", "side"]
 Align = Literal["start", "end"]
 
+GridFlow = Literal["row", "column", "row dense", "column dense"]
 BorderSize = Literal["none", "thin", "thick", "thicker", "thickest"]
 BorderRadius = Literal[
     "xsmall",