https://github.com/borisgerretzen/squaregridlib

Blazor 2D grid component on which you can place panels of customizable size.
https://github.com/borisgerretzen/squaregridlib

blazor dashboard grid grid-layout

Last synced: 9 months ago
JSON representation

Blazor 2D grid component on which you can place panels of customizable size.

• Host: GitHub
• URL: https://github.com/borisgerretzen/squaregridlib
• Owner: BorisGerretzen
• License: lgpl-2.1
• Created: 2023-10-23T07:45:31.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-10-23T19:59:55.000Z (over 2 years ago)
• Last Synced: 2024-04-26T23:23:45.584Z (about 2 years ago)
• Topics: blazor, dashboard, grid, grid-layout
• Language: HTML
• Homepage:
• Size: 254 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SquareGridLib

[![NuGet](https://img.shields.io/nuget/v/SquareGridLib.svg)](https://www.nuget.org/packages/SquareGridLib/)\

Provides a 2D grid component on which you can place panels of customizable size.

Similar to the syncfusion blazor dashboard but simpler.

## How to use

This short snippet shows the basic functionality of the component:

```html

    .my-item {

        border: 1px solid black;

    }

    

        

            
This is a dynamically positioned item.

        

        

            
You can specify the item's position using 'X' and 'Y'.

        

        

            
Height and width can be changed as well.

        

        

            
This is a dynamically positioned item.

        

        

            
This is a dynamically positioned item.

        

    


```

This is what the output looks like, it's very ugly but the structure is what matters.

Elements without a fixed position will flow around the elements that do.

![image](https://github.com/BorisGerretzen/SquareGridLib/assets/15902678/35af7983-5678-4779-b1b9-1aadd96a264c)

For more details check out the `SquareGridLibDemo` project, specifically `Pages/Grid.razor`.

## To do

- [ ] Method on the component `void Pack()` that tries to pack all items compactly.

- [x] Missing something? Open an issue!