Table of Contents

Class TwGrid

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Lays out its children on a CSS grid: column and row counts that change at any breakpoint, columns that fit themselves to the space, custom track templates, named areas, subgrid, auto flow, alignment and gaps.

public class TwGrid : TwLayoutComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwGrid
Implements
Inherited Members

Remarks

Columns are chosen in this order: SubgridCols, then ColTemplate, then MinColWidth, then Cols and its breakpoint variants. Rows work the same way with SubgridRows, RowTemplate and Rows.

A grid is a visual layout, not a data grid: it adds no ARIA grid role and no arrow key navigation. Placing items out of source order changes only where they are drawn, so keep the markup in reading order.

Constructors

TwGrid() 

public TwGrid()

Properties

Align

Gets or sets how every item is aligned inside its cell on the column axis.

[Parameter]
public AlignItems? Align { get; set; }

Property Value

AlignItems?

AlignContent

Gets or sets how the rows are spaced when they are shorter than the grid.

[Parameter]
public AlignContent? AlignContent { get; set; }

Property Value

AlignContent?

Areas

Gets or sets named areas, one string per row with area names separated by spaces, such as ["header header", "sidebar main"]. Place a TwGridItem in an area with its Area. Use a full stop for an empty cell.

[Parameter]
public IReadOnlyList<string>? Areas { get; set; }

Property Value

IReadOnlyList<string>

AutoCols

Gets or sets the size of columns the browser adds on its own, for example with Col.

[Parameter]
public GridAutoSize? AutoCols { get; set; }

Property Value

GridAutoSize?

AutoFill

Gets or sets whether a grid with MinColWidth keeps empty columns when there are too few items to fill a row, so items keep the same width instead of stretching to fill it.

[Parameter]
public bool AutoFill { get; set; }

Property Value

bool

AutoFlow

Gets or sets how children without a position are placed. Leave it unset for the browser default, row by row.

[Parameter]
public GridAutoFlow? AutoFlow { get; set; }

Property Value

GridAutoFlow?

AutoRows

Gets or sets the size of rows the browser adds on its own. Fr makes every row as tall as the tallest.

[Parameter]
public GridAutoSize? AutoRows { get; set; }

Property Value

GridAutoSize?

ColGap

Gets or sets the space between columns as a step on Tailwind's spacing scale. It takes the place of Gap between columns.

[Parameter]
public double? ColGap { get; set; }

Property Value

double?

ColTemplate

Gets or sets a custom column template, as the value of CSS grid-template-columns, such as 16rem 1fr for a fixed sidebar beside a flexible main column.

[Parameter]
public string? ColTemplate { get; set; }

Property Value

string

Cols

Gets or sets the number of equal columns at every width, from 1 to 12.

[Parameter]
public int? Cols { get; set; }

Property Value

int?

ColsLg

Gets or sets the number of columns from the lg breakpoint (64rem) upwards.

[Parameter]
public int? ColsLg { get; set; }

Property Value

int?

ColsMd

Gets or sets the number of columns from the md breakpoint (48rem) upwards.

[Parameter]
public int? ColsMd { get; set; }

Property Value

int?

ColsSm

Gets or sets the number of columns from the sm breakpoint (40rem) upwards.

[Parameter]
public int? ColsSm { get; set; }

Property Value

int?

ColsXl

Gets or sets the number of columns from the xl breakpoint (80rem) upwards.

[Parameter]
public int? ColsXl { get; set; }

Property Value

int?

ColsXl2

Gets or sets the number of columns from the 2xl breakpoint (96rem) upwards.

[Parameter]
public int? ColsXl2 { get; set; }

Property Value

int?

Gap

Gets or sets the space between rows and columns as a step on Tailwind's spacing scale, such as 6 for gap-6.

[Parameter]
public double? Gap { get; set; }

Property Value

double?

Inline

Gets or sets whether the grid is inline, sitting in a line of text instead of taking a line of its own.

[Parameter]
public bool Inline { get; set; }

Property Value

bool

Justify

Gets or sets how the columns are spaced when they are narrower than the grid.

[Parameter]
public JustifyContent? Justify { get; set; }

Property Value

JustifyContent?

JustifyItems

Gets or sets how every item is aligned inside its cell on the row axis.

[Parameter]
public JustifyItems? JustifyItems { get; set; }

Property Value

JustifyItems?

MinColWidth

Gets or sets the narrowest a column may be, as a CSS length such as 16rem. The grid then makes as many columns as fit, with no breakpoints needed, and drops to a single column when even one does not fit.

[Parameter]
public string? MinColWidth { get; set; }

Property Value

string

RowGap

Gets or sets the space between rows as a step on Tailwind's spacing scale. It takes the place of Gap between rows.

[Parameter]
public double? RowGap { get; set; }

Property Value

double?

RowTemplate

Gets or sets a custom row template, as the value of CSS grid-template-rows, such as auto 1fr auto.

[Parameter]
public string? RowTemplate { get; set; }

Property Value

string

Rows

Gets or sets the number of equal rows at every width, from 1 to 6.

[Parameter]
public int? Rows { get; set; }

Property Value

int?

RowsLg

Gets or sets the number of rows from the lg breakpoint upwards.

[Parameter]
public int? RowsLg { get; set; }

Property Value

int?

RowsMd

Gets or sets the number of rows from the md breakpoint upwards.

[Parameter]
public int? RowsMd { get; set; }

Property Value

int?

RowsSm

Gets or sets the number of rows from the sm breakpoint upwards.

[Parameter]
public int? RowsSm { get; set; }

Property Value

int?

RowsXl

Gets or sets the number of rows from the xl breakpoint upwards.

[Parameter]
public int? RowsXl { get; set; }

Property Value

int?

RowsXl2

Gets or sets the number of rows from the 2xl breakpoint upwards.

[Parameter]
public int? RowsXl2 { get; set; }

Property Value

int?

SubgridCols

Gets or sets whether this grid, nested in a grid item, lines its columns up with its parent grid's columns.

[Parameter]
public bool SubgridCols { get; set; }

Property Value

bool

SubgridRows

Gets or sets whether this grid, nested in a grid item, lines its rows up with its parent grid's rows, so headings and buttons in neighbouring cards line up.

[Parameter]
public bool SubgridRows { get; set; }

Property Value

bool

rootClasses

Gets the classes for the rendered element, with Class merged last.

protected override string rootClasses { get; }

Property Value

string

rootStyle

Gets the inline style for the rendered element. Defaults to Style.

protected override string? rootStyle { get; }

Property Value

string
Edit this page