0
# Layout Components
1

2
Responsive layout and container components for structuring applications with Material Design spacing and breakpoints.
3

4
## Capabilities
5

6
### Container
7

8
Responsive container component for centering and constraining content within defined max-widths.
9

10
```typescript { .api }
11
/**
12
 * Container component for centering and constraining content
13
 * @param props - Container configuration
14
 * @returns Container component
15
 */
16
function Container(props: ContainerProps): JSX.Element;
17

18
interface ContainerProps extends CommonProps {
19
  /** The max-width to apply to the container */
20
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
21
  /** If true, the left and right padding is removed */
22
  disableGutters?: boolean;
23
  /** Set the max-width to match the min-width of the current breakpoint */
24
  fixed?: boolean;
25
  /** The component used for the root node */
26
  component?: React.ElementType;
27
  children?: React.ReactNode;
28
}
29
```
30

31
**Usage Examples:**
32

33
```typescript
34
import { Container, Typography } from "@mui/material";
35

36
// Basic container
37
<Container maxWidth="lg">
38
  <Typography variant="h1">Centered Content</Typography>
39
</Container>
40

41
// Fluid container without gutters
42
<Container maxWidth={false} disableGutters>
43
  <Typography>Full width content</Typography>
44
</Container>
45
```
46

47
### Grid
48

49
Flexible grid layout component using CSS Flexbox with responsive breakpoints.
50

51
```typescript { .api }
52
/**
53
 * Grid layout component using CSS Flexbox
54
 * @param props - Grid configuration
55
 * @returns Grid component
56
 */
57
function Grid(props: GridProps): JSX.Element;
58

59
interface GridProps extends CommonProps {
60
  /** If true, defines a flex container */
61
  container?: boolean;
62
  /** If true, defines a flex item */
63
  item?: boolean;
64
  /** Defines spacing between children */
65
  spacing?: number | string;
66
  /** Number of columns to span on xs breakpoint */
67
  xs?: boolean | number | 'auto';
68
  /** Number of columns to span on sm breakpoint */
69
  sm?: boolean | number | 'auto';
70
  /** Number of columns to span on md breakpoint */
71
  md?: boolean | number | 'auto';
72
  /** Number of columns to span on lg breakpoint */
73
  lg?: boolean | number | 'auto';
74
  /** Number of columns to span on xl breakpoint */
75
  xl?: boolean | number | 'auto';
76
  /** Defines flex-direction style property */
77
  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
78
  /** Defines justify-content style property */
79
  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
80
  /** Defines align-items style property */
81
  alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
82
  /** The component used for the root node */
83
  component?: React.ElementType;
84
  children?: React.ReactNode;
85
}
86
```
87

88
**Usage Examples:**
89

90
```typescript
91
import { Grid, Paper } from "@mui/material";
92

93
// Responsive grid layout
94
<Grid container spacing={3}>
95
  <Grid item xs={12} md={6}>
96
    <Paper>Item 1</Paper>
97
  </Grid>
98
  <Grid item xs={12} md={6}>
99
    <Paper>Item 2</Paper>
100
  </Grid>
101
</Grid>
102

103
// Custom alignment
104
<Grid container spacing={2} justifyContent="center" alignItems="center">
105
  <Grid item xs={6}>
106
    <Paper>Centered Item</Paper>
107
  </Grid>
108
</Grid>
109
```
110

111
### Stack
112

113
One-dimensional layout component for vertical or horizontal stacking with consistent spacing.
114

115
```typescript { .api }
116
/**
117
 * One-dimensional layout component for stacking
118
 * @param props - Stack configuration
119
 * @returns Stack component
120
 */
121
function Stack(props: StackProps): JSX.Element;
122

123
interface StackProps extends CommonProps {
124
  /** The direction to stack items */
125
  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
126
  /** Defines spacing between children */
127
  spacing?: number | string;
128
  /** Element placed between each child */
129
  divider?: React.ReactNode;
130
  /** Defines align-items style property */
131
  alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
132
  /** Defines justify-content style property */
133
  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
134
  /** The component used for the root node */
135
  component?: React.ElementType;
136
  children?: React.ReactNode;
137
}
138
```
139

140
**Usage Examples:**
141

142
```typescript
143
import { Stack, Button, Divider } from "@mui/material";
144

145
// Vertical stack with spacing
146
<Stack spacing={2}>
147
  <Button variant="contained">Button 1</Button>
148
  <Button variant="contained">Button 2</Button>
149
  <Button variant="contained">Button 3</Button>
150
</Stack>
151

152
// Horizontal stack with divider
153
<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />}>
154
  <Button>Home</Button>
155
  <Button>About</Button>
156
  <Button>Contact</Button>
157
</Stack>
158
```
159

160
### Box
161

162
Most basic layout component providing a wrapper with access to system styling props.
163

164
```typescript { .api }
165
/**
166
 * Basic layout component with system props
167
 * @param props - Box configuration
168
 * @returns Box component
169
 */
170
function Box(props: BoxProps): JSX.Element;
171

172
interface BoxProps extends CommonProps {
173
  /** The component used for the root node */
174
  component?: React.ElementType;
175
  /** All system props (spacing, colors, typography, etc.) */
176
  m?: number | string; // margin
177
  p?: number | string; // padding
178
  mt?: number | string; // margin-top
179
  mb?: number | string; // margin-bottom
180
  ml?: number | string; // margin-left
181
  mr?: number | string; // margin-right
182
  pt?: number | string; // padding-top
183
  pb?: number | string; // padding-bottom
184
  pl?: number | string; // padding-left
185
  pr?: number | string; // padding-right
186
  color?: string;
187
  bgcolor?: string;
188
  border?: number | string;
189
  borderRadius?: number | string;
190
  display?: string;
191
  flexDirection?: string;
192
  alignItems?: string;
193
  justifyContent?: string;
194
  width?: number | string;
195
  height?: number | string;
196
  minWidth?: number | string;
197
  minHeight?: number | string;
198
  maxWidth?: number | string;
199
  maxHeight?: number | string;
200
  children?: React.ReactNode;
201
}
202
```
203

204
**Usage Examples:**
205

206
```typescript
207
import { Box, Typography } from "@mui/material";
208

209
// Box with spacing and colors
210
<Box p={3} bgcolor="primary.main" color="white" borderRadius={2}>
211
  <Typography>Styled Box</Typography>
212
</Box>
213

214
// Box as flex container
215
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
216
  <Typography variant="h4">Centered Content</Typography>
217
</Box>
218

219
// Responsive Box with breakpoint-specific props
220
<Box
221
  width={{
222
    xs: '100%',
223
    sm: '50%',
224
    md: '25%'
225
  }}
226
  p={{
227
    xs: 1,
228
    sm: 2,
229
    md: 3
230
  }}
231
>
232
  <Typography>Responsive Box</Typography>
233
</Box>
234
```
235

236
## Common Layout Patterns
237

238
### Page Layout
239

240
```typescript
241
import { Container, Box, AppBar, Toolbar, Typography } from "@mui/material";
242

243
function PageLayout({ children }: { children: React.ReactNode }) {
244
  return (
245
    <Box sx={{ flexGrow: 1 }}>
246
      <AppBar position="static">
247
        <Toolbar>
248
          <Typography variant="h6">My App</Typography>
249
        </Toolbar>
250
      </AppBar>
251
      <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
252
        {children}
253
      </Container>
254
    </Box>
255
  );
256
}
257
```
258

259
### Sidebar Layout
260

261
```typescript
262
import { Box, Drawer, AppBar, Toolbar, Typography } from "@mui/material";
263

264
const drawerWidth = 240;
265

266
function SidebarLayout({ children }: { children: React.ReactNode }) {
267
  return (
268
    <Box sx={{ display: 'flex' }}>
269
      <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
270
        <Toolbar>
271
          <Typography variant="h6">App Title</Typography>
272
        </Toolbar>
273
      </AppBar>
274
      <Drawer
275
        variant="permanent"
276
        sx={{
277
          width: drawerWidth,
278
          flexShrink: 0,
279
          '& .MuiDrawer-paper': {
280
            width: drawerWidth,
281
            boxSizing: 'border-box',
282
          },
283
        }}
284
      >
285
        <Toolbar />
286
        {/* Sidebar content */}
287
      </Drawer>
288
      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
289
        <Toolbar />
290
        {children}
291
      </Box>
292
    </Box>
293
  );
294
}
295
```
296

297
## Responsive Breakpoints
298

299
```typescript { .api }
300
// Default breakpoint values
301
interface Breakpoints {
302
  values: {
303
    xs: 0;
304
    sm: 600;
305
    md: 900;
306
    lg: 1200;
307
    xl: 1536;
308
  };
309
}
310

311
// Breakpoint helpers
312
function useMediaQuery(query: string): boolean;
313
```
314

315
**Usage Examples:**
316

317
```typescript
318
import { useMediaQuery, useTheme } from "@mui/material";
319

320
function ResponsiveComponent() {
321
  const theme = useTheme();
322
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
323
  
324
  return (
325
    <Box p={isMobile ? 1 : 3}>
326
      <Typography variant={isMobile ? "h6" : "h4"}>
327
        Responsive Typography
328
      </Typography>
329
    </Box>
330
  );
331
}
332
```