Tesserae

Grid

Description

A component to display a grid

The Grid component provides a powerful layout system based on CSS Grid. It allows you to define columns, rows, and gaps between items.

Items within a Grid can be explicitly positioned or stretched across multiple tracks, offering full control over complex 2D layouts.

Samples

Fixed and Flexible Columns

This grid uses two flexible columns (1fr) and one fixed column (200px). The first item is stretched across all columns.

grid-fixed-sample.js

using System.Linq;
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(columns: new[] { 1.fr(), 1.fr(), 200.px() });
            grid.Gap(8.px());
            grid.Add(Button().SetText("Stretched Item").WS().Primary().GridColumnStretch().GridRow(1, 2));
            Enumerable.Range(1, 10).ForEach(v => grid.Add(Button().SetText($"Item {v}")));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(grid);
        }
    }
}

Responsive Auto-fit Grid

This grid automatically adjusts the number of columns based on the available width (min 200px per item).

grid-autofit-sample.js

using System.Linq;
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 gridAutoSize = Grid(new UnitSize("repeat(auto-fit, minmax(min(200px, 100%), 1fr))"));
            gridAutoSize.Gap(8.px());
            Enumerable.Range(1, 10).ForEach(v => gridAutoSize.Add(Card(TextBlock($"Responsive Item {v}").TextCenter())));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(gridAutoSize);
        }
    }
}

Grid

Description

Samples

Fixed and Flexible Columns

Responsive Auto-fit Grid

See also