Grid
Interfaces
GridProps
Props for the Grid component.
Extends
HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps,"color"|"backgroundColor">
Properties
| Property | Type | Description | Overrides |
|---|---|---|---|
alignContent? | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | Align content (e.g., 'center', 'stretch'). | - |
alignItems? | "flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline" | Align items (e.g., 'center', 'flex-start'). | - |
alignSelf? | "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | Align self (e.g., 'auto', 'center'). | - |
bgColor? | "primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current" | Background color (Bulma color, 'inherit', or 'current'). | - |
children? | ReactNode | Children to render inside the grid. | React.HTMLAttributes.children |
className? | string | Additional CSS class names. | React.HTMLAttributes.className |
color? | "primary" | "link" | "info" | "success" | "warning" | "danger" | Bulma color modifier for the grid. | React.HTMLAttributes.color |
colorShade? | "00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert" | Color shade suffix (e.g., '00', 'invert'). | - |
columnGap? | BulmaGapValue | Column gap for grid (applies is-column-gap-X, 0-8). | - |
display? | "block" | "flex" | "inline" | "inline-block" | "inline-flex" | Display type (e.g., 'block', 'flex'). | - |
fixedCols? | BulmaFixedGridColsProp | For fixed grid only: explicit column count (applies has-X-cols, 0-12), or 'auto' for has-auto-count. | - |
fixedColsDesktop? | BulmaFixedGridCols | For fixed grid only: explicit column count for desktop. | - |
fixedColsFullhd? | BulmaFixedGridCols | For fixed grid only: explicit column count for fullhd. | - |
fixedColsMobile? | BulmaFixedGridCols | For fixed grid only: explicit column count for mobile. | - |
fixedColsTablet? | BulmaFixedGridCols | For fixed grid only: explicit column count for tablet. | - |
fixedColsWidescreen? | BulmaFixedGridCols | For fixed grid only: explicit column count for widescreen. | - |
flexDirection? | "row" | "row-reverse" | "column" | "column-reverse" | Flex direction (e.g., 'row', 'column'). | - |
flexGrow? | "0" | "1" | Flex grow value (e.g., '0', '1'). | - |
flexShrink? | "0" | "1" | Flex shrink value (e.g., '0', '1'). | - |
flexWrap? | "nowrap" | "wrap" | "wrap-reverse" | Flex wrap (e.g., 'wrap', 'nowrap'). | - |
float? | "left" | "right" | Float direction (e.g., 'left', 'right'). | - |
fontFamily? | "primary" | "sans-serif" | "monospace" | "secondary" | "code" | Font family (e.g., 'sans-serif', 'code'). | - |
gap? | BulmaGapValue | Main gap for grid (applies is-gap-X, 0-8). | - |
interaction? | "unselectable" | "clickable" | Interaction behavior (e.g., 'unselectable', 'clickable'). | - |
isFixed? | boolean | Use a fixed grid layout (Bulma's .fixed-grid > .grid). | - |
justifyContent? | "left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | Justify content (e.g., 'center', 'space-between'). | - |
m? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin (e.g., '0', '1'). | - |
mb? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin bottom. | - |
minCol? | BulmaMinColValue | Minimum column width for the grid (applies is-col-min-X, 1-32). | - |
ml? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin left. | - |
mr? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin right. | - |
mt? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin top. | - |
mx? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin horizontal (left and right). | - |
my? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Margin vertical (top and bottom). | - |
overflow? | "clipped" | Overflow behavior (e.g., 'clipped'). | - |
overlay? | boolean | Applies overlay styling if true. | - |
p? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding (e.g., '0', '1'). | - |
pb? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding bottom. | - |
pl? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding left. | - |
pr? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding right. | - |
pt? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding top. | - |
px? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding horizontal (left and right). | - |
py? | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto" | Padding vertical (top and bottom). | - |
radius? | "radiusless" | Border radius style (e.g., 'radiusless'). | - |
responsive? | "mobile" | "narrow" | Responsive behavior (e.g., 'mobile', 'narrow'). | - |
rowGap? | BulmaGapValue | Row gap for grid (applies is-row-gap-X, 0-8). | - |
shadow? | "shadowless" | Shadow style (e.g., 'shadowless'). | - |
textAlign? | "centered" | "justified" | "left" | "right" | Text alignment (e.g., 'centered', 'left'). | - |
textColor? | "primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current" | Text color (Bulma color, 'inherit', or 'current'). | - |
textSize? | "1" | "2" | "3" | "4" | "5" | "6" | "7" | Text size (e.g., '1', '2'). | - |
textTransform? | "capitalized" | "lowercase" | "uppercase" | "italic" | Text transformation (e.g., 'uppercase', 'italic'). | - |
textWeight? | "light" | "normal" | "medium" | "semibold" | "bold" | Text weight (e.g., 'light', 'bold'). | - |
viewport? | "mobile" | "tablet" | "desktop" | "widescreen" | "fullhd" | Viewport for responsive classes (e.g., 'mobile', 'desktop'). | - |
visibility? | "hidden" | "sr-only" | Visibility (e.g., 'hidden', 'sr-only'). | - |
Type Aliases
BulmaFixedGridCols
BulmaFixedGridCols =
0|1|2|3|4|5|6|7|8|9|10|11|12
Allowed fixed grid columns for Bulma grid.
BulmaFixedGridColsProp
BulmaFixedGridColsProp =
BulmaFixedGridCols|"auto"
Allowed fixed grid columns prop for Bulma grid.
BulmaGapValue
BulmaGapValue =
0|1|2|3|4|5|6|7|8
Allowed gap values for Bulma grid.
BulmaMinColValue
BulmaMinColValue =
1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|32
Allowed minimum column values for Bulma grid.
Functions
Grid()
Grid(
props,deprecatedLegacyContext?):ReactNode
Bulma Grid component for CSS Grid layouts, supports both fixed and responsive grid modes.
Parameters
props
Props for the Grid component.
deprecatedLegacyContext?
any
Deprecated
See
Returns
ReactNode
The rendered grid.