0
# Layout Components
1

2
Flexible layout system including Stack for flexbox layouts, Grid for CSS grid layouts, and responsive container components for building consistent application structures.
3

4
## Capabilities
5

6
### Stack
7

8
Flexbox-based layout container with design token integration for consistent spacing and alignment.
9

10
```typescript { .api }
11
/**
12
 * Flexbox layout container with design token support
13
 */
14
function Stack(props: IStackProps): JSX.Element;
15

16
/**
17
 * Individual item within a Stack container
18
 */
19
function StackItem(props: IStackItemProps): JSX.Element;
20

21
interface IStackProps {
22
  /** Element type to render as */
23
  as?: React.ElementType;
24
  /** Whether to use horizontal layout (row) instead of vertical (column) */
25
  horizontal?: boolean;
26
  /** Whether to reverse the direction */
27
  reversed?: boolean;
28
  /** Horizontal alignment of items */
29
  horizontalAlign?: Alignment;
30
  /** Vertical alignment of items */
31
  verticalAlign?: Alignment;
32
  /** Whether to fill available vertical space */
33
  verticalFill?: boolean;
34
  /** Whether to disable shrinking of items */
35
  disableShrink?: boolean;
36
  /** Whether to allow wrapping */
37
  wrap?: boolean;
38
  /** Gap between items (can use design tokens) */
39
  gap?: number | string;
40
  /** Padding around the container */
41
  padding?: number | string;
42
  /** Maximum width of the container */
43
  maxWidth?: number | string;
44
  /** Design tokens for consistent spacing */
45
  tokens?: IStackTokens;
46
  /** Whether to grow items to fill space */
47
  grow?: boolean | number;
48
  /** Custom styles */
49
  styles?: IStyleFunctionOrObject<IStackStyleProps, IStackStyles>;
50
  /** Theme provided by higher-order component */
51
  theme?: ITheme;
52
  /** Additional CSS class */
53
  className?: string;
54
  /** Child elements */
55
  children?: React.ReactNode;
56
}
57

58
interface IStackItemProps {
59
  /** Element type to render as */
60
  as?: React.ElementType;
61
  /** Whether the item should grow to fill space */
62
  grow?: boolean | number;
63
  /** Whether the item should shrink */
64
  shrink?: boolean | number;
65
  /** Whether to disable shrinking */
66
  disableShrink?: boolean;
67
  /** Alignment override for this item */
68
  align?: "auto" | "stretch" | "baseline" | "start" | "center" | "end";
69
  /** Order of the item */
70
  order?: number;
71
  /** Design tokens for this item */
72
  tokens?: IStackItemTokens;
73
  /** Custom styles */
74
  styles?: IStyleFunctionOrObject<IStackItemStyleProps, IStackItemStyles>;
75
  /** Theme provided by higher-order component */
76
  theme?: ITheme;
77
  /** Additional CSS class */
78
  className?: string;
79
  /** Child elements */
80
  children?: React.ReactNode;
81
}
82

83
interface IStackTokens {
84
  /** Gap between child items */
85
  childrenGap?: number | string;
86
  /** Maximum height of the container */
87
  maxHeight?: number | string;
88
  /** Maximum width of the container */
89
  maxWidth?: number | string;
90
  /** Padding around the container */
91
  padding?: number | string | IStackTokens;
92
}
93

94
interface IStackItemTokens {
95
  /** Margin around the item */
96
  margin?: number | string | IStackItemTokens;
97
  /** Padding within the item */
98
  padding?: number | string | IStackItemTokens;
99
}
100

101
type Alignment = 
102
  | "start" 
103
  | "end" 
104
  | "center" 
105
  | "space-between" 
106
  | "space-around" 
107
  | "space-evenly" 
108
  | "baseline" 
109
  | "stretch";
110
```
111

112
**Usage Examples:**
113

114
```typescript
115
import React from "react";
116
import { Stack, StackItem } from "office-ui-fabric-react";
117

118
function BasicStack() {
119
  return (
120
    <Stack tokens={{ childrenGap: 10 }}>
121
      <div>Item 1</div>
122
      <div>Item 2</div>
123
      <div>Item 3</div>
124
    </Stack>
125
  );
126
}
127

128
function HorizontalStack() {
129
  return (
130
    <Stack 
131
      horizontal 
132
      tokens={{ childrenGap: 15 }}
133
      horizontalAlign="space-between"
134
      verticalAlign="center"
135
    >
136
      <span>Left item</span>
137
      <span>Center item</span>
138
      <span>Right item</span>
139
    </Stack>
140
  );
141
}
142

143
function ResponsiveStack() {
144
  return (
145
    <Stack 
146
      tokens={{ 
147
        childrenGap: 20,
148
        padding: 16 
149
      }}
150
      styles={{
151
        root: {
152
          maxWidth: 600,
153
          margin: "0 auto",
154
          border: "1px solid #ddd",
155
          borderRadius: 4
156
        }
157
      }}
158
    >
159
      <StackItem>
160
        <h2>Header</h2>
161
      </StackItem>
162
      
163
      <StackItem grow>
164
        <p>This item will grow to fill available space.</p>
165
      </StackItem>
166
      
167
      <StackItem align="end">
168
        <button>Action Button</button>
169
      </StackItem>
170
    </Stack>
171
  );
172
}
173

174
function NestedStacks() {
175
  return (
176
    <Stack tokens={{ childrenGap: 20 }}>
177
      <Stack 
178
        horizontal 
179
        tokens={{ childrenGap: 10 }}
180
        horizontalAlign="space-between"
181
      >
182
        <span>Navigation</span>
183
        <span>User Menu</span>
184
      </Stack>
185
      
186
      <Stack horizontal tokens={{ childrenGap: 15 }}>
187
        <StackItem styles={{ root: { width: 200 } }}>
188
          <div>Sidebar</div>
189
        </StackItem>
190
        
191
        <StackItem grow>
192
          <div>Main Content Area</div>
193
        </StackItem>
194
      </Stack>
195
    </Stack>
196
  );
197
}
198
```
199

200
### Fabric
201

202
Root application wrapper component that provides theme context to all child components.
203

204
```typescript { .api }
205
/**
206
 * Root application wrapper providing theme context
207
 */
208
function Fabric(props: IFabricProps): JSX.Element;
209

210
interface IFabricProps {
211
  /** Element type to render as */
212
  as?: React.ElementType;
213
  /** Theme to provide to child components */
214
  theme?: IPartialTheme;
215
  /** Whether to apply global styles */
216
  applyTheme?: boolean;
217
  /** Custom styles */
218
  styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;
219
  /** Additional CSS class */
220
  className?: string;
221
  /** Direction for text (ltr or rtl) */
222
  dir?: "ltr" | "rtl";
223
  /** Child elements */
224
  children?: React.ReactNode;
225
}
226
```
227

228
**Usage Examples:**
229

230
```typescript
231
import React from "react";
232
import { Fabric, createTheme, IPartialTheme } from "office-ui-fabric-react";
233

234
function AppWithTheme() {
235
  const customTheme: IPartialTheme = {
236
    palette: {
237
      themePrimary: "#0078d4",
238
      themeLighterAlt: "#eff6fc",
239
      themeLighter: "#deecf9",
240
      themeLight: "#c7e0f4",
241
      themeTertiary: "#71afe5",
242
      themeSecondary: "#2b88d8",
243
      themeDarkAlt: "#106ebe",
244
      themeDark: "#005a9e",
245
      themeDarker: "#004378"
246
    }
247
  };
248

249
  return (
250
    <Fabric theme={customTheme}>
251
      <div>Your application content here</div>
252
    </Fabric>
253
  );
254
}
255

256
function BasicFabricWrapper() {
257
  return (
258
    <Fabric>
259
      <div>Application with default theme</div>
260
    </Fabric>
261
  );
262
}
263
```
264

265
### Grid
266

267
CSS Grid layout component for complex two-dimensional layouts.
268

269
```typescript { .api }
270
/**
271
 * CSS Grid layout component for complex layouts
272
 */
273
function Grid(props: IGridProps): JSX.Element;
274

275
interface IGridProps {
276
  /** Element type to render as */
277
  as?: React.ElementType;
278
  /** CSS grid-template-columns value */
279
  columns?: string;
280
  /** CSS grid-template-rows value */
281
  rows?: string;
282
  /** CSS grid-gap value */
283
  gap?: string | number;
284
  /** CSS grid-column-gap value */
285
  columnGap?: string | number;
286
  /** CSS grid-row-gap value */
287
  rowGap?: string | number;
288
  /** CSS grid-template-areas value */
289
  areas?: string;
290
  /** CSS grid-auto-columns value */
291
  autoColumns?: string;
292
  /** CSS grid-auto-rows value */
293
  autoRows?: string;
294
  /** CSS grid-auto-flow value */
295
  autoFlow?: "row" | "column" | "row dense" | "column dense";
296
  /** CSS justify-items value */
297
  justifyItems?: "start" | "end" | "center" | "stretch";
298
  /** CSS align-items value */
299
  alignItems?: "start" | "end" | "center" | "stretch" | "baseline";
300
  /** CSS justify-content value */
301
  justifyContent?: "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly";
302
  /** CSS align-content value */
303
  alignContent?: "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly";
304
  /** Custom styles */
305
  styles?: IStyleFunctionOrObject<IGridStyleProps, IGridStyles>;
306
  /** Theme provided by higher-order component */
307
  theme?: ITheme;
308
  /** Additional CSS class */
309
  className?: string;
310
  /** Child elements */
311
  children?: React.ReactNode;
312
}
313
```
314

315
### Separator
316

317
Visual divider component for creating sections and grouping related content.
318

319
```typescript { .api }
320
/**
321
 * Visual divider component for content separation
322
 */
323
function Separator(props: ISeparatorProps): JSX.Element;
324

325
interface ISeparatorProps {
326
  /** Element type to render as */
327
  as?: React.ElementType;
328
  /** Whether the separator is vertical instead of horizontal */
329
  vertical?: boolean;
330
  /** Alignment of content within the separator */
331
  alignContent?: "start" | "center" | "end";
332
  /** Custom styles */
333
  styles?: IStyleFunctionOrObject<ISeparatorStyleProps, ISeparatorStyles>;
334
  /** Theme provided by higher-order component */
335
  theme?: ITheme;
336
  /** Additional CSS class */
337
  className?: string;
338
  /** Child content (usually text) */
339
  children?: React.ReactNode;
340
}
341
```
342

343
### Divider
344

345
Content divider with optional text label for organizing information hierarchically.
346

347
```typescript { .api }
348
/**
349
 * Content divider with optional text label
350
 */
351
function Divider(props: IDividerProps): JSX.Element;
352

353
interface IDividerProps {
354
  /** Element type to render as */
355
  as?: React.ElementType;
356
  /** Text to display in the divider */
357
  children?: React.ReactNode;
358
  /** Alignment of the text */
359
  alignContent?: "start" | "center" | "end";
360
  /** Whether the divider is vertical */
361
  vertical?: boolean;
362
  /** Custom styles */
363
  styles?: IStyleFunctionOrObject<IDividerStyleProps, IDividerStyles>;
364
  /** Theme provided by higher-order component */
365
  theme?: ITheme;
366
  /** Additional CSS class */
367
  className?: string;
368
}
369
```
370

371
**Usage Examples:**
372

373
```typescript
374
import React from "react";
375
import { Grid, Separator, Divider } from "office-ui-fabric-react";
376

377
function ResponsiveGrid() {
378
  return (
379
    <Grid
380
      columns="repeat(auto-fit, minmax(250px, 1fr))"
381
      gap="20px"
382
      style={{ padding: "20px" }}
383
    >
384
      <div style={{ background: "#f3f2f1", padding: "20px" }}>
385
        Card 1
386
      </div>
387
      <div style={{ background: "#f3f2f1", padding: "20px" }}>
388
        Card 2
389
      </div>
390
      <div style={{ background: "#f3f2f1", padding: "20px" }}>
391
        Card 3
392
      </div>
393
    </Grid>
394
  );
395
}
396

397
function LayoutWithSeparators() {
398
  return (
399
    <div>
400
      <section>
401
        <h2>Section 1</h2>
402
        <p>Content here...</p>
403
      </section>
404
      
405
      <Separator />
406
      
407
      <section>
408
        <h2>Section 2</h2>
409
        <p>More content...</p>
410
      </section>
411
      
412
      <Divider>Related Content</Divider>
413
      
414
      <section>
415
        <h2>Section 3</h2>
416
        <p>Additional content...</p>
417
      </section>
418
    </div>
419
  );
420
}
421
```
422

423
## Types
424

425
```typescript { .api }
426
// Theme interfaces for layout components
427
interface IPartialTheme {
428
  /** Color palette */
429
  palette?: Partial<IPalette>;
430
  /** Font definitions */
431
  fonts?: Partial<IFontStyles>;
432
  /** Semantic color mappings */
433
  semanticColors?: Partial<ISemanticColors>;
434
  /** Spacing scale */
435
  spacing?: Partial<ISpacing>;
436
  /** Visual effects (shadows, borders) */
437
  effects?: Partial<IEffects>;
438
  /** Whether theme is inverted (dark) */
439
  isInverted?: boolean;
440
  /** Whether to disable global class names */
441
  disableGlobalClassNames?: boolean;
442
}
443

444
// Styling function interfaces
445
interface IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> {
446
  (props: TStylesProps): Partial<TStyleSet>;
447
}
448

449
interface IStyleSet<TStyleSet> {
450
  [P in keyof Omit<TStyleSet, keyof IStyleSet<TStyleSet>>]: IStyle;
451
}
452

453
interface IStyle {
454
  [key: string]: any;
455
}
456
```