Grid
The grid component helps keeping layout consistent across various screen resolutions and sizes. FluentGrid comes with a 12-point grid system and contains 5 types of breakpoints that are used for specific screen sizes.
Examples
Default
Justify
Spacing
No breakpoints
You can resize the panel using the slider in the bottom right-hand corner.
If no Breakpoints or if xs="0" is defined for a FluentGridItem component,
this style will be applied: flex: 1; max-width: fit-content;.
In this example, the first item (the message) cannot be lower than 200px min-width: 200px;.
To avoid that, the second item (the buttons) will be moved to the next line.
Breakpoints
Breakpoints help you control your layout based on windows size:
Device | Code | Type | Range |
|---|---|---|---|
| Extra Small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | < 960px |
| Medium | md | Large tablet to laptop | < 1280px |
| Large | lg | Desktop | < 1920px |
| Extra Large | xl | HD and 4k | < 2560px |
| Extra Extra Large | xxl | 4k+ and ultra-wide | >= 2560px |
Hiding elements
For faster, mobile-friendly development, use responsive display classes to show and hide elements according to device. Avoid creating entirely different versions of the same site, but instead hide elements reactively for each screen size.
To hide elements, simply use the HiddenWhen attribute by selecting one of the following values or combining them with
the | operator (see Enumeration flags)
To display an element only on a given range of screen sizes, you can combine a these values.
e.g. GridItemHidden.Md | GridItemHidden.Lg will display the element for all screen sizes, except on medium and large devices.
AdaptiveRendering allows for not generating HTML code in a FluentGridItem based on the value of the HiddenWhen parameter.
In other words, when AdaptiveRendering=false (default), the content of the FluentGridItem is simply hidden by CSS styles,
whereas if AdaptiveRendering=true, the content of the FluentGridItem is not rendered by Blazor.
This allows for fine-grained control over when HTML is generated or not, for example in a case where rendering the grid item takes
a lot of time or leads to a lot of data being transferred.
| GridItemHidden | X Small < 600px | Small 600px - 959px | Medium 960px - 1279px | Large 1280px - 1919px | X Large 1920px - 2559px | XX Large ≥ 2560px |
|---|---|---|---|---|---|---|
None | ||||||
Xs | ||||||
Sm | ||||||
Md | ||||||
Lg | ||||||
Xl | ||||||
Xxl | ||||||
XsAndDown | ||||||
SmAndDown | ||||||
MdAndDown | ||||||
LgAndDown | ||||||
XlAndDown | ||||||
XxlAndDown | ||||||
XsAndUp | ||||||
SmAndUp | ||||||
MdAndUp | ||||||
LgAndUp | ||||||
XlAndUp | ||||||
XxlAndUp |
Documentation
FluentGrid Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AdaptiveRendering | bool | False | Gets or sets the adaptive rendering, which not render the HTML code when the item is hidden (true) or only hide the item by CSS (false). Default is false. |
ChildContent | RenderFragment? | Gets or sets the child content of component. | |
Justify | JustifyContent | FlexStart | Defines how the browser distributes space between and around content items. |
Spacing | int | 3 | Gets or sets the distance between flexbox items, using a multiple of 4px. Only values from 0 to 10 are possible. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnBreakpointEnter | EventCallback<GridItemSize> | when page size falls within a specific size range (xs, sm, md, lg, xl, xxl). |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | ||
FluentGrid_MediaChangedAsync | string size | Task |
FluentGridItem Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AdaptiveRendering | bool? | Gets or sets the adaptive rendering, which not render the HTML code when the item is hidden (true) or only hide the item by CSS (false). Default is false. | |
ChildContent | RenderFragment? | ||
Gap | string? | Gets or sets the gaps (gutters) between rows and columns. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap | |
HiddenWhen | GridItemHidden? | Hide the item on the specified sizes (you can combine multiple values: GridItemHidden.Sm | GridItemHidden.Xl). | |
Justify | JustifyContent? | Defines how the browser distributes space between and around content items. | |
lg | int? | The number of columns the item should span in the 12-column grid system. Large (lg) devices (desktops, less than 1920px wide) | |
md | int? | The number of columns the item should span in the 12-column grid system. Medium (md) devices (tablets, less than 1280px wide) | |
sm | int? | The number of columns the item should span in the 12-column grid system. Small (sm) devices (landscape phones, less than 960px wide) | |
xl | int? | The number of columns the item should span in the 12-column grid system. Extra large (xl) devices (large desktops, less than 2560px wide) | |
xs | int? | The number of columns the item should span in the 12-column grid system. Extra Small (xs) devices (portrait phones, less than 600px wide) | |
xxl | int? | The number of columns the item should span in the 12-column grid system. Extra extra large (xxl) devices (larger desktops, more than 2560px wide) |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
GetHiddenAttribute | GridItemHidden? hiddenWhen | string? | Returns the hidden attribute value for the specified GridItemHidden value. |