The Grid system provides a flexible, responsive layout structure using two components: GridContainer and GridItem. Built on Material-UI’s Grid, it follows a 12-column layout system.
Installation
npm install @naturacosmeticos/natds-web
Import
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
Usage
Basic Grid
Create a simple responsive grid layout:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function BasicGrid() {
return (
<GridContainer spacing={2}>
<GridItem xs={12} md={6}>
<div>First Column</div>
</GridItem>
<GridItem xs={12} md={6}>
<div>Second Column</div>
</GridItem>
</GridContainer>
);
}
Responsive Columns
Define different column spans for different breakpoints:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function ResponsiveGrid() {
return (
<GridContainer spacing={3}>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div>Responsive Item 1</div>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div>Responsive Item 2</div>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div>Responsive Item 3</div>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div>Responsive Item 4</div>
</GridItem>
</GridContainer>
);
}
Grid with No Spacing
Remove spacing between grid items:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function NoSpacing() {
return (
<GridContainer spacing={0}>
<GridItem xs={6}>
<div>No gap</div>
</GridItem>
<GridItem xs={6}>
<div>No gap</div>
</GridItem>
</GridContainer>
);
}
Nested Grids
Grids can be nested within GridItems:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function NestedGrid() {
return (
<GridContainer spacing={2}>
<GridItem xs={12} md={8}>
<GridContainer spacing={1}>
<GridItem xs={6}>Nested 1</GridItem>
<GridItem xs={6}>Nested 2</GridItem>
</GridContainer>
</GridItem>
<GridItem xs={12} md={4}>
<div>Sidebar</div>
</GridItem>
</GridContainer>
);
}
GridContainer Props
spacing
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
default:"0"
Defines the space between grid items. The spacing value is multiplied by the theme spacing unit (8px by default).
0: No spacing1: 8px spacing2: 16px spacing3: 24px spacing- etc.
alignItems
'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
default:"'stretch'"
Defines the align-items CSS property. Controls vertical alignment of items.
justifyContent
'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
default:"'flex-start'"
Defines the justify-content CSS property. Controls horizontal alignment of items.
direction
'row' | 'row-reverse' | 'column' | 'column-reverse'
default:"'row'"
Defines the flex-direction CSS property.
wrap
'nowrap' | 'wrap' | 'wrap-reverse'
default:"'wrap'"
Defines the flex-wrap CSS property.
The content of the grid container (typically GridItem components).
CSS class name to apply to the container.
GridItem Props
xs
boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Number of columns to span on extra-small screens (<600px). When true, the item grows to use available space.
sm
boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Number of columns to span on small screens (≥600px).
md
boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Number of columns to span on medium screens (≥960px).
lg
boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Number of columns to span on large screens (≥1280px).
xl
boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Number of columns to span on extra-large screens (≥1920px).
If true, sets min-width: 0 on the item. Useful for preventing content from overflowing.
The content of the grid item.
CSS class name to apply to the item.
Breakpoints
The grid system uses the following breakpoints:
| Breakpoint | Size | Device |
|---|
| xs | <600px | Mobile portrait |
| sm | ≥600px | Mobile landscape / Small tablet |
| md | ≥960px | Tablet |
| lg | ≥1280px | Desktop |
| xl | ≥1920px | Large desktop |
Examples
Equal Width Columns
Create columns with equal width:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function EqualWidth() {
return (
<GridContainer spacing={2}>
<GridItem xs>
<div>Auto-sized 1</div>
</GridItem>
<GridItem xs>
<div>Auto-sized 2</div>
</GridItem>
<GridItem xs>
<div>Auto-sized 3</div>
</GridItem>
</GridContainer>
);
}
Centered Content
Center grid items horizontally:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function CenteredGrid() {
return (
<GridContainer spacing={2} justifyContent="center">
<GridItem xs={6} md={4}>
<div>Centered Item</div>
</GridItem>
</GridContainer>
);
}
Complex Layout
Create a more complex responsive layout:
import { GridContainer, GridItem, Container } from '@naturacosmeticos/natds-web';
function DashboardLayout() {
return (
<Container>
<GridContainer spacing={3}>
{/* Header - full width */}
<GridItem xs={12}>
<div>Header</div>
</GridItem>
{/* Sidebar - 1/4 width on desktop, full width on mobile */}
<GridItem xs={12} md={3}>
<div>Sidebar</div>
</GridItem>
{/* Main content - 3/4 width on desktop, full width on mobile */}
<GridItem xs={12} md={9}>
<GridContainer spacing={2}>
<GridItem xs={12} sm={6}>
<div>Card 1</div>
</GridItem>
<GridItem xs={12} sm={6}>
<div>Card 2</div>
</GridItem>
</GridContainer>
</GridItem>
{/* Footer - full width */}
<GridItem xs={12}>
<div>Footer</div>
</GridItem>
</GridContainer>
</Container>
);
}
Auto Layout
Items automatically adjust their width:
import { GridContainer, GridItem } from '@naturacosmeticos/natds-web';
function AutoLayout() {
return (
<GridContainer spacing={2}>
<GridItem xs="auto">
<div>Variable width content</div>
</GridItem>
<GridItem xs>
<div>Flexible width</div>
</GridItem>
<GridItem xs="auto">
<div>Variable width content</div>
</GridItem>
</GridContainer>
);
}
Best Practices
Always wrap GridItem components with a GridContainer
Use responsive breakpoints (xs, sm, md, lg, xl) for mobile-first design
Set spacing at the container level for consistent gaps
Use the 12-column system for predictable layouts
Don’t nest GridContainer directly inside another GridContainer - use GridItem
Avoid mixing different spacing values in the same layout section
Performance Tips
- Grid components use CSS Flexbox, which is performant and well-supported
- Minimize the number of nested grids when possible
- Use
zeroMinWidth when dealing with text overflow issues
Accessibility
The Grid components:
- Use semantic HTML structure
- Maintain logical reading order
- Support responsive design for various screen sizes
- Work with screen readers and keyboard navigation
- Can be enhanced with ARIA attributes as needed
Related Components
- Container - For centering and constraining grid layouts
- Spacing - For adding custom spacing to elements
- Box - For low-level layout utilities
API Reference
For complete API details, consult the Material-UI Grid API documentation. 
