Grid

Responsive 12‑column layout primitive with span-based children. Each GridItem declares how many columns it consumes; container controls total columns and gaps. Supports responsive values for columns and span using breakpoint-aware props.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁵⁾

Properties

⁽²²⁾

Basic

Basic 12-column grid with equal width items.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Grid
,
 
GridItem
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Grid
 
columns
=
{
12
}
 
gap
=
"md"
>
        
{
Array
.
from
(
{
 length
:
 
12
 
}
)
.
map
(
(
_
,
 index
)
 
=>
 
(
          
<GridItem
 
key
=
{
index
}
 
span
=
{
1
}
>
            
<Card
 
variant
=
"outline"
>
              
<Text
 
size
=
"sm"
 
align
=
"center"
>
                
{
index 
+
 
1
}
              
</Text
>
            
</Card
>
          
</GridItem
>
        
)
)
}
      
</Grid
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Twelve
 even columns
,
 each spanning a single track
      
</Text
>
    
</Block
>
  
)
;
}

Gaps

Row and column gutters come from the container: gap sets both, rowGap and columnGap override one each. Items never carry their own padding or margin.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Grid
,
 
GridItem
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 sections 
=
 
[
  
{
    label
:
 
'Compact gap (xs)'
,
    props
:
 
{
 gap
:
 
'xs'
 as 
const
 
}
,
  
}
,
  
{
    label
:
 
'Roomy gap (2xl)'
,
    props
:
 
{
 gap
:
 
'2xl'
 as 
const
 
}
,
  
}
,
  
{
    label
:
 
'Wide rows, tight columns'
,
    props
:
 
{
 rowGap
:
 
'2xl'
 as 
const
,
 columnGap
:
 
'xs'
 as 
const
 
}
,
  
}
,
]
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
{
sections
.
map
(
(
{
 label
,
 props 
}
)
 
=>
 
(
        
<Block
 
key
=
{
label
}
 fullWidth
>
          
<Text
 
size
=
"sm"
 
weight
=
"semibold"
>
            
{
label
}
          
</Text
>
          
<Grid
 
columns
=
{
6
}
 
{
.
.
.
props
}
>
            
{
Array
.
from
(
{
 length
:
 
12
 
}
)
.
map
(
(
_
,
 index
)
 
=>
 
(
              
<GridItem
 
key
=
{
index
}
 
span
=
{
1
}
>
                
<Card
>
                  
<Text
 
size
=
"sm"
>
Item
 
{
index 
+
 
1
}
</Text
>
                
</Card
>
              
</GridItem
>
            
)
)
}
          
</Grid
>
        
</Block
>
      
)
)
}
    
</Block
>
  
)
;
}

Nesting

Nested grids demonstrating composition inside a grid item.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Grid
,
 
GridItem
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Grid
 
columns
=
{
12
}
 
gap
=
"md"
>
        
<GridItem
 
span
=
{
8
}
>
          
<Card
 
variant
=
"outline"
>
            
{
/* Block's own gap separates the label from the nested grid — no
                margin on either one. */
}
            
<Block
>
              
<Text
 
weight
=
"semibold"
 
size
=
"sm"
>
                
Parent
 span
=
8
              
</Text
>
              
<Grid
 
columns
=
{
6
}
 
gap
=
"sm"
>
                
{
Array
.
from
(
{
 length
:
 
6
 
}
)
.
map
(
(
_
,
 index
)
 
=>
 
(
                  
<GridItem
 
key
=
{
index
}
 
span
=
{
2
}
>
                    
<Card
 
variant
=
"filled"
 
p
=
"xs"
>
                      
<Text
 
size
=
"xs"
 
align
=
"center"
>
                        
Nested
 
{
index 
+
 
1
}
                      
</Text
>
                    
</Card
>
                  
</GridItem
>
                
)
)
}
              
</Grid
>
            
</Block
>
          
</Card
>
        
</GridItem
>
        
<GridItem
 
span
=
{
4
}
>
          
<Card
 
variant
=
"outline"
>
            
<Text
 
weight
=
"semibold"
 
size
=
"sm"
>
              
Sidebar
 span
=
4
            
</Text
>
          
</Card
>
        
</GridItem
>
      
</Grid
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
GridItem
 components can render another 
Grid
 to illustrate nested layouts
      
</Text
>
    
</Block
>
  
)
;
}

Responsive

Responsive columns and item spans using breakpoint-aware props.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Grid
,
 
GridItem
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
// Responsive props match the breakpoint configuration used in Grid
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Grid
 
columns
=
{
{
 base
:
 
4
,
 md
:
 
8
,
 lg
:
 
12
 
}
}
 
gap
=
"md"
>
        
<GridItem
 
span
=
{
{
 base
:
 
4
,
 md
:
 
4
,
 lg
:
 
6
 
}
}
>
          
<Card
>
            
<Text
>
Hero
 
(
4
/
8
/
6
)
</Text
>
          
</Card
>
        
</GridItem
>
        
<GridItem
 
span
=
{
{
 base
:
 
4
,
 md
:
 
4
,
 lg
:
 
6
 
}
}
>
          
<Card
>
            
<Text
>
Hero
 
(
4
/
8
/
6
)
</Text
>
          
</Card
>
        
</GridItem
>
        
<GridItem
 
span
=
{
{
 base
:
 
2
,
 md
:
 
4
,
 lg
:
 
3
 
}
}
>
          
<Card
>
            
<Text
>
Side
 
(
2
/
4
/
3
)
</Text
>
          
</Card
>
        
</GridItem
>
        
<GridItem
 
span
=
{
{
 base
:
 
2
,
 md
:
 
4
,
 lg
:
 
3
 
}
}
>
          
<Card
>
            
<Text
>
Side
 
(
2
/
4
/
3
)
</Text
>
          
</Card
>
        
</GridItem
>
        
<GridItem
 
span
=
{
{
 base
:
 
4
,
 md
:
 
8
,
 lg
:
 
12
 
}
}
>
          
<Card
>
            
<Text
>
Footer
 
(
4
/
8
/
12
)
</Text
>
          
</Card
>
        
</GridItem
>
      
</Grid
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Column
 and span props adapt at base
,
 md
,
 and lg breakpoints
      
</Text
>
    
</Block
>
  
)
;
}

Spans

Demonstrates varying column spans within a 12-column grid.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Grid
,
 
GridItem
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 spans 
=
 
[
6
,
 
6
,
 
4
,
 
4
,
 
4
,
 
3
,
 
3
,
 
3
,
 
3
]
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<Grid
 
columns
=
{
12
}
 
gap
=
"md"
>
        
{
spans
.
map
(
(
span
,
 index
)
 
=>
 
(
          
<GridItem
 
key
=
{
`${span}-${index}`
}
 
span
=
{
span
}
>
            
<Card
>
              
<Text
>
{
`span=${span}`
}
</Text
>
            
</Card
>
          
</GridItem
>
        
)
)
}
      
</Grid
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Mix
 spans within a 
12
-
column grid to create varied layouts
      
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Grid

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap