BlazorCssGrid 1.0.0

Blazor CSS Grid layout library

This blazor component makes it super easy to create application layouts for WebApps that look exactly how you want them to.

Built 100% using CSS

This library is built using <a href="https://www.w3schools.com/css/css_grid.asp">CSS Grids</a> which means there are no JS or CSS libraries to install.

It's usage is inspired by the kind of layouts you can achieve using XAML Grid Controls, and if you are familiar with laying out an application's controls using grid semantics this will be very familiar to you.

Install

Simply add a nuget package reference to BlazorCssGrid

dotnet add BlazorCssGrid

Usage

There are 2 controls

• GridContainer - Define the shapes of Rows and Columns
• GridItem - Wrapper around any component which defines where the component should be rendered.

GridContainer

The grid container defines the rows and columns for the grid.

GridItem

A grid item wraps content and adds data which controls the positioning of the content.

Any grid item can be made to have horizontal and/or vertical scroll bars, allowing the content to scroll.

Example

<GridContainer Rows="auto 1fr auto" Columns="auto 1fr auto" ColumnGap="10px" RowGap="10px">
    
    <GridItem Row="1" Column="1" style="border-color: pink; border-style:solid;padding:10px;">
        <p>Row 1 Col 1</p>
    </GridItem>

    <GridItem Row="1" Column="2" style="border-color: red; border-style:solid;padding:10px;">
        <p>Row 1 Col 2</p>
    </GridItem>

    <GridItem Row="1" Column="3" style="border-color: blue; border-style:solid;padding:10px;">
        <p>Row 1 Col 3</p>
    </GridItem>

    
    <GridItem Row="2" Column="1" ColumnSpan="3" Style="border-color:chartreuse; border-style:dashed;">

        <GridContainer Columns="100px 1fr 100px" RowGap="10px" ColumnGap="10px" >
            
            <GridItem Column="1" style="background-color:lightsalmon;padding:10px;">
                @for (int i = 0; i < 1000; i++)
                {
                    <p>This GridItem is cropped @i.</p>
                }
            </GridItem>

            
            <GridItem Column="2" VerticalScrollbar="Auto" Style="background-color: lightgreen;padding:10px;">
                @for (int i = 0; i < 1000; i++)
                {
                    <p>This GridItem should scroll @i.</p>
                }
            </GridItem>

            
            <GridItem Column="3" style="background-color: lightblue;padding:10px;">
                @Body
            </GridItem>

        </GridContainer>

    </GridItem>

    
    <GridItem Row="3" Column="1" style="border-color: black; border-style:solid;padding:10px;">
        Row 3 Col 2
    </GridItem>

    <GridItem Row="3" Column="2" ColumnSpan="2" style="border-color: purple; border-style: solid; padding: 10px;">
        Row 3 Col 2/3<br />
    </GridItem>
</GridContainer>

Important CSS trick for full screen layouts.

If you are using a Grid layout for your SPA you probably want your grid to fill the whole visible screen in a web browser.
You can do this with the 100vh and 100vw width and height definitions, but you will find that many browsers end up adding a scrollbar when you do this.

The solution is easy, you simply need to disable the extra margins. In your CSS you can disable the padding and margin the browser is adding by simply adding this bit of CSS:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

Now you can have your root grid container simply set the height and width to 100vh/100vw like this:

<GridContainer height="100vh" width="100vh">
...
</GridContainer>