Flexbox and grid

Lay out with flexbox and CSS grid. A composite Flex helper covers the common container setup, while grid utilities handle the rest.

Flex containers

The composite Flex method sets the display, direction and any of the optional justify, align, wrap and gap values in one call.

Css.Flex(
    FlexDirection.Row,
    justify: Justify.Between,
    align: Align.Center,
    gap: 4,
    wrap: FlexWrapValue.Wrap);

Start

Middle

End

<div class="@Css.Flex(FlexDirection.Row, Justify.Between, Align.Center, gap: 4)">
    <div>Start</div>
    <div>Middle</div>
    <div>End</div>
</div>

Direction

Utility	Generated CSS
`FlexRow()`	`flex-direction: row`
`FlexCol()`	`flex-direction: column`
`Flex(FlexDirection.RowReverse)`	`flex-direction: row-reverse`
`Flex(FlexDirection.ColReverse)`	`flex-direction: column-reverse`

Justify content

Utility	Generated CSS
`JustifyStart()`	`justify-content: flex-start`
`JustifyEnd()`	`justify-content: flex-end`
`JustifyCenter()`	`justify-content: center`
`JustifyBetween()`	`justify-content: space-between`
`Flex(..., Justify.Around)`	`justify-content: space-around`
`Flex(..., Justify.Evenly)`	`justify-content: space-evenly`

Align items

Utility	Generated CSS
`ItemsStart()`	`align-items: flex-start`
`ItemsEnd()`	`align-items: flex-end`
`ItemsCenter()`	`align-items: center`
`Flex(..., align: Align.Baseline)`	`align-items: baseline`
`Flex(..., align: Align.Stretch)`	`align-items: stretch`

Wrap, grow and gap

Utility	Generated CSS
`FlexWrap()`	`flex-wrap: wrap`
`Flex(..., wrap: FlexWrapValue.NoWrap)`	`flex-wrap: nowrap`
`Grow()`	`flex-grow: 1`
`Shrink()`	`flex-shrink: 1`
`Gap(4)`	`gap: 1rem`
`GapX(4)`	`column-gap: 1rem`
`GapY(4)`	`row-gap: 1rem`

Fixed

Grow

<div class="@Css.Flex(FlexDirection.Row, gap: 2)">
    <div>Fixed</div>
    <div class="@Css.Grow()">Grow</div>
</div>

Grid

Utility	Generated CSS
`GridCols(3)`	`grid-template-columns: repeat(3, minmax(0, 1fr))`
`GridRows(2)`	`grid-template-rows: repeat(2, minmax(0, 1fr))`
`ColSpan(2)`	`grid-column: span 2 / span 2`
`RowSpan(2)`	`grid-row: span 2 / span 2`
`ColStart(3)`	`grid-column-start: 3`

span 2

start 3

<div class="@Css.Grid().GridCols(4).Gap(3)">
    <div class="@Css.ColSpan(2)">span 2</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div class="@Css.ColStart(3)">start 3</div>
</div>

Continue with spacing.