Layout, Alignment, Stack, and Grid

Tesserae provides flexible layout primitives via Stack (flexbox) and Grid (CSS grid). Use HStack()/VStack() factory methods or Grid(...) to build layouts, and then apply alignment, spacing, and placement via fluent APIs and extensions.

Stack basics

A Stack is a flex container with an orientation:

HStack() creates a horizontal stack.
VStack() creates a vertical stack.
Stack(Orientation) lets you specify a direction explicitly.

layout-alignment-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var layout = HStack()
                .AlignItemsCenter()
                .JustifyContent(ItemJustify.Between)
                .Children(
                    Button("Cancel"),
                    Button("Save").Primary()
                );
            document.body.style.overflow = "hidden";
            MountCenteredToBody(layout);
        }
    }

}

Stack alignment APIs map to flexbox properties:

AlignItems(...), AlignContent(...)
JustifyContent(...), JustifyItems(...)
CanWrap, IsInline for wrapping/inline behavior.

Align individual items in a stack

Use extension methods on components to align individual items within a stack:

layout-alignment-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var row = HStack().Children(
                TextBlock("Left"),
                TextBlock("Center").AlignCenter(),
                TextBlock("Right").AlignEnd()
            );
            document.body.style.overflow = "hidden";
            MountCenteredToBody(row);
        }
    }

}

Alignment helpers are defined on IComponentExtensions and map to Stack.SetAlign/Stack.SetJustify calls.

Grid basics

Grid maps to CSS grid and supports explicit column/row templates:

layout-alignment-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var grid = Grid(1.fr(), 2.fr())
                .Rows(new[] { 64.px(), 1.fr() })
                .Gap(16.px());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(grid);
        }
    }

}

Grid(params UnitSize[] columns) initializes columns.
Rows(...), Columns(...), Gap(...), RowGap(...), ColumnGap(...) configure grid behavior.

Placing items

Use GridColumn/GridRow extensions to place items inside grid cells:

layout-alignment-4-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var grid = Grid(1.fr(), 1.fr());

            var header = TextBlock("Header").GridColumnStretch();
            var left   = TextBlock("Left").GridRow(2, 3).GridColumn(1, 2);
            var right  = TextBlock("Right").GridRow(2, 3).GridColumn(2, 3);

            grid.Children(header, left, right);
            document.body.style.overflow = "hidden";
            MountCenteredToBody(right);
        }
    }

}

These extensions map to Grid.SetGridColumn and Grid.SetGridRow and must be called before the component is added to the grid so the styles are propagated correctly.

Stretching, grow, and spacing helpers

Use layout extensions to control how items size within stacks and grids:

layout-alignment-5-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var form = VStack().Children(
                TextBlock("Name"),
                TextBox().Stretch(),
                HStack().Children(
                    Button("Cancel"),
                    Button("Save").Grow()
                )
            );
            document.body.style.overflow = "hidden";
            MountCenteredToBody(form);
        }
    }

}

Stretch() sets width and height to 100%. Tip: You can also use the short form .S()
Grow(int)/Shrink()/NoShrink() map to flex-grow/flex-shrink on stack items.

Referenced by

index