Skip to content

Commit 014d888

Browse files
author
Sebastian-Debian
committed
changed Alignment. Updated readme and demo.
1 parent a90ef2d commit 014d888

File tree

13 files changed

+261
-73
lines changed

13 files changed

+261
-73
lines changed

‎README.md‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,15 @@ A modern, lightweight Blazor component library for creating **CSS Grid Layouts**
2727
## Installation
2828

2929
1. Install the package via NuGet:
30-
`dotnet add package Blazor.SimpleGridComponent`
30+
```
31+
dotnet add package Blazor.SimpleGridComponent
32+
```
3133
3234
2. Add the namespace to your _Imports.razor:
33-
`@using Blazor.SimpleGrid.Components`
34-
`@using Blazor.SimpleGrid.Enums`
35+
```
36+
@using Blazor.SimpleGrid.Components
37+
@using Blazor.SimpleGrid.Enums
38+
```
3539
3640
---
3741
@@ -72,7 +76,13 @@ You can register the services in your Program.cs file.:
7276
Custom Global Defaults
7377
This allows you to override any property for all grids in your app.
7478
```csharp
75-
builder.Services.AddSimpleGrid(options => { options.HorizontalGap = "20px"; options.VerticalGap = "20px"; options.ItemHorizontalAlignment = HorizontalAlignment.Center; options.Columns = "1fr 1fr"; // All grids will default to 2 columns });
79+
builder.Services.AddSimpleGrid(options =>
80+
{
81+
options.HorizontalGap = "20px";
82+
options.VerticalGap = "20px";
83+
options.ItemHorizontalAlignment = HorizontalItemAlignment.Center;
84+
options.Columns = "1fr 1fr"; // All grids will default to 2 columns
85+
});
7686
```
7787

7888
### 2. Priority Order
@@ -98,8 +108,10 @@ The components follow a strict priority logic to determine which value to use:
98108
| Gap | string | null | Shorthand for both Horizontal and Vertical gap. |
99109
| Width | string | "auto" | Width of the grid container. |
100110
| Height | string | "auto" | Height of the grid container. |
101-
| HorizontalAlignment | HorizontalAlignment | Start | Align grid content (justify-content). |
102-
| VerticalAlignment | VerticalAlignment | Stretch | Align items (align-items). |
111+
| HorizontalItemAlignment | HorizontalItemAlignment | Start | Align grid content (justify-items). |
112+
| HorizontalAlignment | HorizontalAlignment | FlexStart | Align of entire grid (justify-content). |
113+
| VerticalItemAlignment | VerticalItemAlignment | Stretch | Align items (align-items). |
114+
| VerticalAlignment | VerticalAlignment | Stretch | Align of entire grid (align-content). |
103115
#### SimpleGridItem (Element)
104116

105117
| Property | Type | Default | Description |
@@ -109,8 +121,8 @@ The components follow a strict priority logic to determine which value to use:
109121
| Row | string | "auto" | Starting row position. |
110122
| ColumnSpan | int | 1 | Number of columns to span. |
111123
| RowSpan | int | 1 | Number of rows to span. |
112-
| HorizontalAlignment | HorizontalAlignment | Stretch | justify-self. |
113-
| VerticalAlignment | VerticalAlignment | Stretch | align-self. |
124+
| HorizontalAlignment | HorizontalAlignment | Auto | justify-self. |
125+
| VerticalAlignment | VerticalAlignment | Auto | align-self. |
114126

115127
---
116128

‎samples/Blazor.SimpleGrid.WasmSample/Blazor.SimpleGrid.WasmSample.csproj‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
22

33
<PropertyGroup>
44
<TargetFramework>net10.0</TargetFramework>
@@ -9,8 +9,11 @@
99
</PropertyGroup>
1010

1111
<ItemGroup>
12-
<PackageReference Include="Blazor.SimpleGridComponent" Version="1.1.0" />
1312
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.3" />
1413
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.3" PrivateAssets="all" />
1514
</ItemGroup>
15+
16+
<ItemGroup>
17+
<ProjectReference Include="..\..\src\Blazor.SimpleGrid\Blazor.SimpleGrid.csproj" />
18+
</ItemGroup>
1619
</Project>

‎samples/Blazor.SimpleGrid.WasmSample/Pages/Demo.razor‎

Lines changed: 94 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@
77
<div class="sg-demo-wrapper">
88
<header class="sg-header">
99
<h1>Blazor.SimpleGrid Showcase</h1>
10-
<p>Eine leichte Grid-Library für moderne Blazor-Apps.</p>
10+
<p>A lightweight grid library for modern Blazor apps.</p>
1111
</header>
1212

1313
<section class="sg-section">
14-
<h2>1. Einfaches Spalten-Layout</h2>
14+
<h2>1. Simple column layout</h2>
1515
<div class="sg-preview">
16-
<SimpleGrid Columns="1fr 1fr 1fr" Gap="15px">
17-
<SimpleGridItem><div class="sg-box">1</div></SimpleGridItem>
18-
<SimpleGridItem><div class="sg-box">2</div></SimpleGridItem>
19-
<SimpleGridItem><div class="sg-box">3</div></SimpleGridItem>
16+
<SimpleGrid Columns="1fr 1fr 1fr" Gap="15px" HorizontalItemAlignment="HorizontalItemAlignment.Stretch">
17+
<SimpleGridItem class="sg-box">1</SimpleGridItem>
18+
<SimpleGridItem class="sg-box">2</SimpleGridItem>
19+
<SimpleGridItem class="sg-box">3</SimpleGridItem>
2020
</SimpleGrid>
2121
</div>
2222
<div class="sg-code">
23-
<pre><code>&lt;SimpleGrid Columns="1fr 1fr 1fr" Gap="15px"&gt;
23+
<pre><code>&lt;SimpleGrid Columns="1fr 1fr 1fr" Gap="15px" HorizontalItemAlignment="HorizontalItemAlignment.Stretch"&gt;
2424
&lt;SimpleGridItem&gt;1&lt;/SimpleGridItem&gt;
2525
&lt;SimpleGridItem&gt;2&lt;/SimpleGridItem&gt;
2626
&lt;SimpleGridItem&gt;3&lt;/SimpleGridItem&gt;
@@ -33,52 +33,115 @@
3333
<div class="sg-preview">
3434
<SimpleGrid Columns="150px 1fr 150px"
3535
TemplateAreas="header header header | nav main side | footer footer footer"
36-
Gap="8px">
36+
Gap="8px"
37+
HorizontalItemAlignment="HorizontalItemAlignment.Stretch">
3738

38-
<SimpleGridItem Area="header"><div class="sg-box header">Header</div></SimpleGridItem>
39-
<SimpleGridItem Area="nav"><div class="sg-box nav">Nav</div></SimpleGridItem>
40-
<SimpleGridItem Area="main"><div class="sg-box main">Main Content</div></SimpleGridItem>
41-
<SimpleGridItem Area="side"><div class="sg-box side">Side</div></SimpleGridItem>
42-
<SimpleGridItem Area="footer"><div class="sg-box footer">Footer</div></SimpleGridItem>
39+
<SimpleGridItem class="sg-box header" Area="header">Header</SimpleGridItem>
40+
<SimpleGridItem class="sg-box nav" Area="nav">Nav</SimpleGridItem>
41+
<SimpleGridItem class="sg-box main" Area="main">Main Content</SimpleGridItem>
42+
<SimpleGridItem class="sg-box side" Area="side">Side</SimpleGridItem>
43+
<SimpleGridItem class="sg-box footer" Area="footer">Footer</SimpleGridItem>
4344
</SimpleGrid>
4445
</div>
4546
<div class="sg-code">
4647
<pre><code>&lt;SimpleGrid Columns="150px 1fr 150px"
4748
TemplateAreas="header header header | nav main side | footer footer footer"
48-
Gap="8px"&gt;
49+
Gap="8px"
50+
HorizontalItemAlignment="HorizontalItemAlignment.Stretch"&gt;
4951

50-
&lt;SimpleGridItem Area="header"&gt;&lt;div class="sg-box header"&gt;Header&lt;/div&gt;&lt;/SimpleGridItem&gt;
51-
&lt;SimpleGridItem Area="nav"&gt;&lt;div class="sg-box nav"&gt;Nav&lt;/div&gt;&lt;/SimpleGridItem&gt;
52-
&lt;SimpleGridItem Area="main"&gt;&lt;div class="sg-box main"&gt;Main Content&lt;/div&gt;&lt;/SimpleGridItem&gt;
53-
&lt;SimpleGridItem Area="side"&gt;&lt;div class="sg-box side"&gt;Side&lt;/div&gt;&lt;/SimpleGridItem&gt;
54-
&lt;SimpleGridItem Area="footer"&gt;&lt;div class="sg-box footer"&gt;Footer&lt;/div&gt;&lt;/SimpleGridItem&gt;
52+
&lt;SimpleGridItem Area="header"&gt;Header&lt;/SimpleGridItem&gt;
53+
&lt;SimpleGridItem Area="nav"&gt;Nav&lt;/SimpleGridItem&gt;
54+
&lt;SimpleGridItem Area="main"&gt;Main Content&lt;/SimpleGridItem&gt;
55+
&lt;SimpleGridItem Area="side"&gt;Side&lt;/SimpleGridItem&gt;
56+
&lt;SimpleGridItem Area="footer"&gt;Footer&lt;/SimpleGridItem&gt;
5557
&lt;/SimpleGrid&gt;</code></pre>
5658
</div>
5759
</section>
5860
<section class="sg-section">
5961
<h2>3. Responsive Grid (Auto-Resize)</h2>
6062
<p style="font-size: 0.9rem; color: #666; margin-bottom: 1rem;">
61-
Verkleinere das Browserfenster, um zu sehen, wie die Spalten automatisch umbrechen.
63+
Minimize the browser window to see how the columns wrap automatically.
6264
</p>
6365
<div class="sg-preview">
64-
<SimpleGrid Columns="repeat(auto-fill, minmax(200px, 1fr))" Gap="15px">
65-
<SimpleGridItem><div class="sg-box">Card 1</div></SimpleGridItem>
66-
<SimpleGridItem><div class="sg-box">Card 2</div></SimpleGridItem>
67-
<SimpleGridItem><div class="sg-box">Card 3</div></SimpleGridItem>
68-
<SimpleGridItem><div class="sg-box">Card 4</div></SimpleGridItem>
66+
<SimpleGrid Columns="repeat(auto-fill, minmax(200px, 1fr))" Gap="15px"
67+
HorizontalItemAlignment="HorizontalItemAlignment.Stretch">
68+
<SimpleGridItem class="sg-box">Card 1</SimpleGridItem>
69+
<SimpleGridItem class="sg-box">Card 2</SimpleGridItem>
70+
<SimpleGridItem class="sg-box">Card 3</SimpleGridItem>
71+
<SimpleGridItem class="sg-box">Card 4</SimpleGridItem>
6972
</SimpleGrid>
7073
</div>
7174
<div class="sg-code">
72-
<pre><code>&lt;!-- Die Spalten passen sich automatisch der Container-Breite an --&gt;
73-
&lt;SimpleGrid Columns="repeat(auto-fill, minmax(200px, 1fr))" Gap="15px"&gt;
74-
&lt;SimpleGridItem&gt;&lt;div class="sg-box"&gt;Card 1&lt;/div&gt;&lt;/SimpleGridItem&gt;
75-
&lt;SimpleGridItem&gt;&lt;div class="sg-box"&gt;Card 2&lt;/div&gt;&lt;/SimpleGridItem&gt;
76-
&lt;SimpleGridItem&gt;&lt;div class="sg-box"&gt;Card 3&lt;/div&gt;&lt;/SimpleGridItem&gt;
77-
&lt;SimpleGridItem&gt;&lt;div class="sg-box"&gt;Card 4&lt;/div&gt;&lt;/SimpleGridItem&gt;
75+
<pre><code>&lt;SimpleGrid Columns="repeat(auto-fill, minmax(200px, 1fr))" Gap="15px" HorizontalItemAlignment="HorizontalItemAlignment.Stretch"&gt;
76+
&lt;SimpleGridItem&gt;Card 1&lt;/SimpleGridItem&gt;
77+
&lt;SimpleGridItem&gt;Card 2&lt;/SimpleGridItem&gt;
78+
&lt;SimpleGridItem&gt;Card 3&lt;/SimpleGridItem&gt;
79+
&lt;SimpleGridItem&gt;Card 4&lt;/SimpleGridItem&gt;
7880
&lt;/SimpleGrid&gt;</code></pre>
7981
</div>
8082
</section>
83+
<section class="sg-section">
84+
<h2>4. Explicit Rows & Width (Dashboard Style)</h2>
85+
<p class="sg-description">Using explicit <code>Rows</code> and <code>Width="100%"</code> to create a fixed-height layout.</p>
86+
<div class="sg-preview">
87+
<SimpleGrid Columns="1fr 1fr" Rows="50px 150px" Width="100%" Gap="10px" HorizontalItemAlignment="HorizontalItemAlignment.Stretch">
88+
<SimpleGridItem class="sg-box header" ColumnSpan="2">Top Bar (50px)</SimpleGridItem>
89+
<SimpleGridItem class="sg-box main">Widget A (150px)</SimpleGridItem>
90+
<SimpleGridItem class="sg-box main">Widget B (150px)</SimpleGridItem>
91+
</SimpleGrid>
92+
</div>
93+
<div class="sg-code">
94+
<pre><code>&lt;SimpleGrid Columns="1fr 1fr" Rows="50px 150px" Width="100%" Gap="10px" HorizontalItemAlignment="HorizontalItemAlignment.Stretch"&gt;
95+
&lt;SimpleGridItem ColumnSpan="2"&gt;Top Bar (50px)&lt;/SimpleGridItem&gt;
96+
&lt;SimpleGridItem&gt;Widget A (150px)&lt;/SimpleGridItem&gt;
97+
&lt;SimpleGridItem&gt;Widget B (150px)&lt;/SimpleGridItem&gt;
98+
&lt;/SimpleGrid&gt;</code></pre>
99+
</div>
100+
</section>
101+
102+
@* --- NEU: Sektion 5: Alignment & Overrides --- *@
103+
<section class="sg-section">
104+
<h2>5. Alignment & Item Overrides</h2>
105+
<p class="sg-description">The grid centers all items, but the second item overrides this to <code>End</code>.</p>
106+
<div class="sg-preview">
107+
<SimpleGrid Columns="1fr 1fr" Height="150px"
108+
HorizontalItemAlignment="HorizontalItemAlignment.Center"
109+
VerticalItemAlignment="VerticalItemAlignment.Center"
110+
Style="background: #eee;">
111+
112+
<SimpleGridItem class="sg-box">
113+
Centered
114+
</SimpleGridItem>
81115

116+
<SimpleGridItem class="sg-box" HorizontalAlignment="HorizontalItemAlignment.End" VerticalAlignment="VerticalItemAlignment.End">
117+
I'm at the Bottom
118+
</SimpleGridItem>
119+
</SimpleGrid>
120+
</div>
121+
<div class="sg-code">
122+
<pre><code>&lt;SimpleGrid Columns="1fr 1fr" Height="150px"
123+
HorizontalItemAlignment="HorizontalItemAlignment.Center"
124+
VerticalItemAlignment="VerticalItemAlignment.Center"&gt;
125+
126+
&lt;SimpleGridItem&gt;Centered Item&lt;/SimpleGridItem&gt;
127+
128+
&lt;SimpleGridItem VerticalAlignment="VerticalItemAlignment.End"&gt;
129+
Bottom Override
130+
&lt;/SimpleGridItem&gt;
131+
&lt;/SimpleGrid&gt;</code></pre>
132+
</div>
133+
</section>
134+
135+
<section class="sg-section">
136+
<h2>6. Global Options (DI)</h2>
137+
<p class="sg-description">You can configure these defaults in your <code>Program.cs</code>.</p>
138+
<div class="sg-code">
139+
<pre><code>builder.Services.AddSimpleGrid(options => {
140+
options.HorizontalGap = "2rem";
141+
options.ItemVerticalAlignment = VerticalItemAlignment.Center;
142+
});</code></pre>
143+
</div>
144+
</section>
82145
</div>
83146

84147
<style>

‎src/Blazor.SimpleGrid/Blazor.SimpleGrid.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
<PropertyGroup>
1111
<PackageId>Blazor.SimpleGridComponent</PackageId>
12-
<Version>1.1.0</Version>
12+
<Version>1.2.0</Version>
1313
<Authors>CodingCodeSeb</Authors>
1414
<Company></Company>
1515
<Description>A lightweight Blazor component library for easy CSS Grid layouts.</Description>

‎src/Blazor.SimpleGrid/Components/SimpleGrid.razor‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,12 @@
7575
[Parameter]
7676
public string? Width { get; set; }
7777

78+
/// <summary>
79+
/// Aligns items within their grid areas horizontally.
80+
/// </summary>
81+
[Parameter]
82+
public HorizontalItemAlignment? HorizontalItemAlignment { get; set; }
83+
7884
/// <summary>
7985
/// Aligns the entire grid content horizontally.
8086
/// </summary>
@@ -85,6 +91,12 @@
8591
/// Aligns items within their grid areas vertically.
8692
/// </summary>
8793
[Parameter]
94+
public VerticalItemAlignment? VerticalItemAlignment { get; set; }
95+
96+
/// <summary>
97+
/// Aligns the entire grid content vertically.
98+
/// </summary>
99+
[Parameter]
88100
public VerticalAlignment? VerticalAlignment { get; set; }
89101

90102
/// <summary>
@@ -134,7 +146,9 @@
134146
string w = Width ?? options.Width;
135147
string h = Height ?? options.Height;
136148
var flow = AutoFlow ?? options.AutoFlow;
149+
var hItemAlign = HorizontalItemAlignment ?? options.HorizontalItemAlignment;
137150
var hAlign = HorizontalAlignment ?? options.HorizontalAlignment;
151+
var vItemAlign = VerticalItemAlignment ?? options.VerticalItemAlignment;
138152
var vAlign = VerticalAlignment ?? options.VerticalAlignment;
139153

140154
// Gap Logic: Shorthand 'Gap' overrides specific gaps
@@ -153,8 +167,10 @@
153167
grid-auto-rows: {autoRows};
154168
column-gap: {effectiveHorizontal};
155169
row-gap: {effectiveVertical};
170+
justify-items: {hItemAlign.ToCss()};
156171
justify-content: {hAlign.ToCss()};
157-
align-items: {vAlign.ToCss()};
172+
align-items: {vItemAlign.ToCss()};
173+
align-content: {vAlign.ToCss()};
158174
{Style}";
159175
}
160176
}

‎src/Blazor.SimpleGrid/Components/SimpleGridItem.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,13 @@
5555
/// Aligns this specific item horizontally within its cell (justify-self).
5656
/// </summary>
5757
[Parameter]
58-
public HorizontalAlignment? HorizontalAlignment { get; set; }
58+
public HorizontalItemAlignment? HorizontalAlignment { get; set; }
5959

6060
/// <summary>
6161
/// Aligns this specific item vertically within its cell (align-self).
6262
/// </summary>
6363
[Parameter]
64-
public VerticalAlignment? VerticalAlignment { get; set; }
64+
public VerticalItemAlignment? VerticalAlignment { get; set; }
6565

6666
/// <summary>
6767
/// Custom CSS styles to be appended to the item's inline style.
@@ -77,12 +77,12 @@
7777
var options = ServiceProvider.GetService<SimpleGridOptions>() ?? new SimpleGridOptions();
7878

7979
// Nutze den gesetzten Parameter oder den globalen Standardwert aus dem Service
80-
var hAlign = HorizontalAlignment ?? options.ItemHorizontalAlignment;
81-
var vAlign = VerticalAlignment ?? options.ItemVerticalAlignment;
80+
var hAlign = HorizontalAlignment?.ToCss() ?? options.ItemHorizontalAlignment.ToCss();
81+
var vAlign = VerticalAlignment?.ToCss() ?? options.ItemVerticalAlignment.ToCss();
8282

8383
var baseStyle = $@"
84-
justify-self: {hAlign.ToCss()};
85-
align-self: {vAlign.ToCss()};
84+
justify-self: {hAlign};
85+
align-self: {vAlign};
8686
{Style}";
8787

8888
if (!string.IsNullOrWhiteSpace(Area))

‎src/Blazor.SimpleGrid/Enums/HorizontalAlignment.cs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66
/// </summary>
77
public enum HorizontalAlignment
88
{
9-
Start,
109
Center,
11-
End,
12-
Stretch,
10+
FlexStart,
11+
FlexEnd,
1312
SpaceBetween,
1413
SpaceAround,
1514
SpaceEvenly

‎src/Blazor.SimpleGrid/Enums/HorizontalItemAlignment.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
namespace Blazor.SimpleGrid.Enums;
2+
3+
/// <summary>
4+
/// Defines how the browser distributes space between and around content items
5+
/// along the main-axis (horizontal) of the grid.
6+
/// </summary>
7+
public enum HorizontalItemAlignment
8+
{
9+
Auto,
10+
Normal,
11+
Stretch,
12+
Start,
13+
Left,
14+
Center,
15+
End,
16+
Right,
17+
BaselineAlignment
18+
}

‎src/Blazor.SimpleGrid/Enums/VerticalAlignment.cs‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22

33
/// <summary>
44
/// Defines how the browser distributes space between and around content items
5-
/// along the cross-axis (vertical) of the grid.
5+
/// along vertical of the grid.
66
/// </summary>
77
public enum VerticalAlignment
88
{
9-
Start,
9+
Strech,
1010
Center,
11-
End,
12-
Stretch,
13-
Baseline
11+
FlexStart,
12+
FlexEnd,
13+
SpaceBetween,
14+
SpaceAround,
15+
SpaceEvenly
1416
}

0 commit comments

Comments
 (0)