Components

Grid

A responsive CSS grid. Set a column count per breakpoint; cells that need more room use VetoGridItem.

Columns per breakpoint

Mobile-first: Columns applies everywhere, and each larger breakpoint takes over from its width upwards. Resize the window to watch this go from one column to four.

1

2

3

4

5

6

7

8

razor

<VetoGrid Columns="1" ColumnsSmall="2" ColumnsLarge="4" Gap="VetoSpacing.Medium">
    <VetoCard>1</VetoCard>
    <VetoCard>2</VetoCard>
</VetoGrid>

Spanning columns

Counts reach CSS as custom properties rather than classes, so any column count works without the library having to ship a class for it.

Spans two

One

razor

<VetoGrid Columns="2" ColumnsMedium="4">
    <VetoGridItem SpanMedium="2">
        <VetoCard>Spans two</VetoCard>
    </VetoGridItem>
    <VetoCard>One</VetoCard>
</VetoGrid>

A span never outgrows the grid

A span wider than the columns in force at that width is clamped to them, so a two-column item in a grid that is one column on a phone takes the full row instead of pushing the layout off the side.

Span 2

One

razor

<VetoGrid Columns="1" ColumnsMedium="3">
    <VetoGridItem Span="2">…</VetoGridItem>   @* one column wide on a phone *@
</VetoGrid>

As many columns as fit

MinItemWidth fills the row with as many columns as fit, none narrower than the width given - responsive without a single breakpoint.

1

2

3

4

5

6

7

8

razor

<VetoGrid MinItemWidth="12rem">
    …
</VetoGrid>

VetoGrid

Parameter	Type	Default	Description
`Columns`	`int`	`1`	Columns at every width, unless a larger breakpoint overrides it.
`ColumnsSmall`	`int?`	`null`	Columns from 640px up.
`ColumnsMedium`	`int?`	`null`	Columns from 960px up.
`ColumnsLarge`	`int?`	`null`	Columns from 1280px up.
`Gap`	`VetoSpacing`	`Large`	Space between cells, both directions.
`Align`	`VetoAlign`	`Stretch`	Alignment of cell content within its row.
`MinItemWidth`	`string?`	`null`	As many columns as fit, none narrower than this CSS length. Overrides Columns.

VetoGridItem

Parameter	Type	Default	Description
`Span`	`int`	`1`	Columns to span at every width. Never more than the grid has at that width.
`SpanSmall`	`int?`	`null`	Columns to span from 640px up.
`SpanMedium`	`int?`	`null`	Columns to span from 960px up.
`SpanLarge`	`int?`	`null`	Columns to span from 1280px up.