Tesserae - Grid

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.

API reference

class

Grid

public class Grid : IContainer<Grid, IComponent>, IHasBackgroundColor, IHasMarginPadding, ISpecialCaseStyling

A CSS-Grid container with explicit row and column tracks, gap and alignment, for two-dimensional layouts.

Constructors

Constructor

Grid

public Grid(params UnitSize[] columns)

Initializes a new instance of this class.

Constructor

Grid

public Grid(UnitSize[] columns, UnitSize[] rows)

Initializes a new instance of this class.

Properties

Property

Grid.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

Grid.Margin

public string Margin { get ; set ; }

Gets or sets the CSS margin of the component.

Property

Grid.Padding

public string Padding { get ; set ; }

Gets or sets the CSS padding of the component.

Property

Grid.StylingContainer

public HTMLElement StylingContainer

Gets or sets the styling container.

Property

Grid.PropagateToStackItemParent

public bool PropagateToStackItemParent { get; private set; }

Gets or sets the propagate to stack item parent.

Methods

Method

Grid.Columns

public Grid Columns(params UnitSize[] columns)

Defines the columns of the grid (track sizes).

Method

Grid.Rows

public Grid Rows(UnitSize[] rows)

Defines the rows of the grid (track sizes).

Method

Grid.Add

public void Add(IComponent component)

Adds the given item to the component.

Method

Grid.SetGridColumn

public static void SetGridColumn(IComponent component, int start, int end)

Needs to be called before the component is added to the Grid.

Method

Grid.SetGridRow

public static void SetGridRow(IComponent component, int start, int end)

Needs to be called before the component is added to the Grid.

Method

Grid.AlignItems

public Grid AlignItems(ItemAlign align)

Sets the align-items css property for this stack

Parameters

align

Method

Grid.AlignContent

public Grid AlignContent(ItemAlign align)

Sets the align-items css property for this stack

Parameters

align

Method

Grid.JustifyContent

public Grid JustifyContent(ItemJustify justify)

Sets the justify-content css property for this stack

Parameters

justify

Method

Grid.JustifyItems

public Grid JustifyItems(ItemJustify justify)

Sets the justify-content css property for this stack

Parameters

justify

Method

Grid.Relative

public Grid Relative()

Make this grid relative (i.e. position:relative)

Method

Grid.AlignItemsCenter

public Grid AlignItemsCenter()

Sets the align-items css property for this grid to 'center'

Parameters

align

Method

Grid.OverflowHidden

public Grid OverflowHidden()

Hides any content that overflows the component's bounds.

Method

Grid.Gap

public Grid Gap(UnitSize gapSize)

Sets the gap between rows and columns of the grid.

Method

Grid.RowGap

public Grid RowGap(UnitSize gapSize)

Sets the gap between rows of the grid.

Method

Grid.ColumnGap

public Grid ColumnGap(UnitSize gapSize)

Sets the gap between columns of the grid.

Method

Grid.AutoRows

public Grid AutoRows(UnitSize autoRowValue)

Sets the auto-generated row size of the grid.

Method

Grid.AutoColumn

public Grid AutoColumn(UnitSize autoColumnValue)

Sets the auto-generated column size of the grid.

Method

Grid.FlowColumn

public Grid FlowColumn()

Switches the grid to column flow.

Method

Grid.Clear

public virtual void Clear()

Clears the component's current state.

Method

Grid.RemovePropagation

public Grid RemovePropagation()

Removes the given propagation from the component.

Method

Grid.NoDefaultMargin

public Grid NoDefaultMargin()

Removes / disables the default margin on the component.

Method

Grid.Replace

public void Replace(IComponent newComponent, IComponent oldComponent)

Replaces an existing item with a new one.

Method

Grid.Remove

public void Remove(IComponent component)

Removes the given item from the component.

Method

Grid.Render

public virtual HTMLElement Render()

Renders the component's root HTML element.

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

API reference

Constructors

Grid

Grid

Properties

Grid.Background

Grid.Margin

Grid.Padding

Grid.StylingContainer

Grid.PropagateToStackItemParent

Methods

Grid.Columns

Grid.Rows

Grid.Add

Grid.SetGridColumn

Grid.SetGridRow

Grid.AlignItems

Parameters

Grid.AlignContent

Parameters

Grid.JustifyContent

Parameters

Grid.JustifyItems

Parameters

Grid.Relative

Grid.AlignItemsCenter

Parameters

Grid.OverflowHidden

Grid.Gap

Grid.RowGap

Grid.ColumnGap

Grid.AutoRows

Grid.AutoColumn

Grid.FlowColumn

Grid.Clear

Grid.RemovePropagation

Grid.NoDefaultMargin

Grid.Replace

Grid.Remove

Grid.Render

Samples

Fixed and Flexible Columns

Responsive Auto-fit Grid

See also