Implement Grid/GridRow

[carson-katri]

Closes #97 and #98.

<grid modifiers={@native |> frame(width: 350, height: 300)}>
    <grid-row alignment="top">
        <text>Row 1</text>
        <%= for _ <- 1..2 do %>
            <rectangle fill-color="system-red" />
        <% end %>
    </grid-row>
    <divider />
    <grid-row>
        <text>Row 2</text>
        <%= for _ <- 1..5 do %>
            <rectangle fill-color="system-green" />
        <% end %>
    </grid-row>
    <divider />
    <grid-row alignment="bottom">
        <text>Row 3</text>
        <%= for _ <- 1..4 do %>
            <rectangle fill-color="system-blue" />
        <% end %>
    </grid-row>
</grid>

TODO

A few modifiers need to be implemented:

• gridColumnAlignment(_:)
• gridCellColumns(_:)
• gridCellAnchor(_:)
• gridCellUnsizedAxes(_:)

[carson-katri]

Modifiers are implemented on the Elixir side here: liveview-native/live_view_native_swift_ui#7.

<grid alignment="leading">
    <grid-row>
        <text modifiers={@native |> grid_column_alignment(guide: :trailing)}>Regular font:</text>
        <text>Helvetica 12</text>
        <button>Select...</button>
    </grid-row>
    <grid-row>
        <text>Fixed-width font:</text>
        <text>Menlo Regular 11</text>
        <button>Select...</button>
    </grid-row>
    <grid-row alignment="bottom">
        <rectangle fill-color="system-clear" modifiers={@native |> grid_cell_unsized_axes(axes: :all)} />
        <toggle modifiers={@native |> grid_cell_columns(count: 2)}>
            Use fixed-width font for new documents
        </toggle>
    </grid-row>
</grid>

[shadowfacts]

Code looks good, but the dividers in your example template don't seem to be present in the screenshot. Are they actually not appearing, or was the template/screenshot just out of sync?

[carson-katri]

The screenshot was out of sync. It looks like this: