Accent color
# Grid
## Description
The BitGrid component is a flexible and customizable grid layout, offering responsive columns and alignment flexibility for structured content presentation.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ChildContent | `RenderFragment?` | null | The content of the Grid. |
| Columns | `int` | 12 | Defines the columns of Grid. |
| ColumnsXs | `int?` | null | Number of columns in the extra small breakpoint. |
| ColumnsSm | `int?` | null | Number of columns in the small breakpoint. |
| ColumnsMd | `int?` | null | Number of columns in the medium breakpoint. |
| ColumnsLg | `int?` | null | Number of columns in the large breakpoint. |
| ColumnsXl | `int?` | null | Number of columns in the extra large breakpoint. |
| ColumnsXxl | `int?` | null | Number of columns in the extra extra large breakpoint. |
| HorizontalAlign | `BitAlignment` | BitAlignment.Start | Defines whether to render Grid children horizontally. |
| HorizontalSpacing | `string?` | null | Defines the horizontal spacing between Grid children. |
| Spacing | `string` | 4px | Defines the spacing between Grid children. |
| Span | `int` | 1 | Defines the span of Grid. |
| VerticalSpacing | `string?` | null | Defines the vertical spacing between Grid children. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitAlignment Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Start | 0 | |
| End | 1 | |
| Center | 2 | |
| SpaceBetween | 3 | |
| SpaceAround | 4 | |
| SpaceEvenly | 5 | |
| Baseline | 6 | |
| Stretch | 7 | |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitGridItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ChildContent | `RenderFragment?` | null | The content of the Grid item. |
| ColumnSpan | `int` | 1 | Number of columns a grid item should fill. |
| Xs | `int?` | null | Number of columns in the extra small breakpoint. |
| Sm | `int?` | null | Number of columns in the small breakpoint. |
| Md | `int?` | null | Number of columns in the medium breakpoint. |
| Lg | `int?` | null | Number of columns in the large breakpoint. |
| Xl | `int?` | null | Number of columns in the extra large breakpoint. |
| Xxl | `int?` | null | Number of columns in the extra extra large breakpoint. |
## Examples
\n**Basic**:
```razor
@for (int i = 0; i < 8; i++)
{
var item = i + 1;
Grid Item@(item)
}
```
\n**Columns**:
```razor
Column span 4
Column span 2
Column span 2
Column span 1
Column span 1
Column span 1
Column span 1
```
\n**Alignment**:
```razor
@for (int i = 0; i < 13; i++)
{
var item = i + 1;
Grid Item@(item)
}
```
```csharp
private BitAlignment horizontalAlign;
```
\n**Spacings**:
```razor
@for (int i = 0; i < 16; i++)
{
var item = i + 1;
Grid Item@(item)
}
```
```csharp
private double verticalSpacing = 0.5;
private double horizontalSpacing = 0.5;
```
\n**Breakpoints**:
```razor
Md = 1
Xs = 3, Md = 2
Lg = 2
Xs = 1, Lg = 1
Xs = 3
Xs = 2, Md = 3
Xs = 2
@for (int i = 0; i < 8; i++)
{
var item = i + 1;
Grid Item@(item)
}
```