0
# Layout Components
1

2
UIkit's layout components provide responsive grid systems, containers, sections, and positioning utilities for structuring web interfaces.
3

4
## Capabilities
5

6
### Grid System
7

8
Responsive grid system using CSS Grid and Flexbox for creating flexible layouts.
9

10
```css { .api }
11
/* Grid Container */
12
.uk-grid {
13
  /* Creates grid container with automatic child spacing */
14
  display: flex;
15
  flex-wrap: wrap;
16
  margin: 0;
17
  padding: 0;
18
  list-style: none;
19
}
20

21
/* Grid Spacing Variants */
22
.uk-grid-small { /* Small grid gaps */ }
23
.uk-grid-medium { /* Medium grid gaps */ }
24
.uk-grid-large { /* Large grid gaps */ }
25
.uk-grid-collapse { /* No grid gaps */ }
26

27
/* Grid Column Control */
28
.uk-grid-column-small { /* 1 column on small screens */ }
29
.uk-grid-column-medium { /* 2 columns on medium screens */ }  
30
.uk-grid-column-large { /* 3 columns on large screens */ }
31
.uk-grid-column-xlarge { /* 4 columns on xlarge screens */ }
32

33
/* Grid Item Widths */
34
.uk-width-1-1 { /* Full width */ }
35
.uk-width-1-2 { /* Half width */ }
36
.uk-width-1-3 { /* One third width */ }
37
.uk-width-2-3 { /* Two thirds width */ }
38
.uk-width-1-4 { /* One quarter width */ }
39
.uk-width-3-4 { /* Three quarters width */ }
40
.uk-width-1-5 { /* One fifth width */ }
41
.uk-width-1-6 { /* One sixth width */ }
42

43
/* Responsive Width Classes */
44
.uk-width-1-2@s { /* Half width on small+ screens */ }
45
.uk-width-1-3@m { /* One third width on medium+ screens */ }
46
.uk-width-1-4@l { /* One quarter width on large+ screens */ }
47
```
48

49
**Usage Examples:**
50

51
```html
52
<!-- Basic Grid -->
53
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
54
    <div>
55
        <div class="uk-card uk-card-default uk-card-body">Item 1</div>
56
    </div>
57
    <div>
58
        <div class="uk-card uk-card-default uk-card-body">Item 2</div>
59
    </div>
60
    <div>
61
        <div class="uk-card uk-card-default uk-card-body">Item 3</div>
62
    </div>
63
</div>
64

65
<!-- Custom Grid Widths -->
66
<div class="uk-grid" uk-grid>
67
    <div class="uk-width-2-3@m">
68
        <p>Main content (66.7% on medium+ screens)</p>
69
    </div>
70
    <div class="uk-width-1-3@m">
71
        <p>Sidebar (33.3% on medium+ screens)</p>
72
    </div>
73
</div>
74
```
75

76
### Container System
77

78
Content containers with responsive max-widths for consistent content alignment.
79

80
```css { .api }
81
/* Container Classes */
82
.uk-container {
83
  /* Standard container with responsive max-width */
84
  max-width: 1200px;
85
  margin-left: auto;
86
  margin-right: auto;
87
  padding-left: 15px;
88
  padding-right: 15px;
89
}
90

91
.uk-container-small {
92
  /* Small container variant */
93
  max-width: 900px;
94
}
95

96
.uk-container-large {
97
  /* Large container variant */ 
98
  max-width: 1600px;
99
}
100

101
.uk-container-xlarge {
102
  /* Extra large container variant */
103
  max-width: 1800px;
104
}
105

106
.uk-container-expand {
107
  /* Full width container */
108
  max-width: none;
109
}
110

111
/* Container Item Alignment */
112
.uk-container-item-padding-remove-left { /* Remove left padding */ }
113
.uk-container-item-padding-remove-right { /* Remove right padding */ }
114
```
115

116
**Usage Examples:**
117

118
```html
119
<!-- Standard Container -->
120
<div class="uk-container">
121
    <h1>Page Title</h1>
122
    <p>Container content with responsive max-width.</p>
123
</div>
124

125
<!-- Small Container -->
126
<div class="uk-container uk-container-small">
127
    <article>Article content in smaller container</article>
128
</div>
129

130
<!-- Full Width Section with Container Inside -->
131
<section class="uk-section uk-section-primary">
132
    <div class="uk-container">
133
        <h2>Section Title</h2>
134
        <p>Content within section container.</p>
135
    </div>
136
</section>
137
```
138

139
### Section System
140

141
Content sections with consistent vertical spacing and theme variants.
142

143
```css { .api }
144
/* Section Classes */
145
.uk-section {
146
  /* Standard section with vertical padding */
147
  padding-top: 40px;
148
  padding-bottom: 40px;
149
}
150

151
/* Section Size Variants */
152
.uk-section-xsmall { /* Extra small section padding */ }
153
.uk-section-small { /* Small section padding */ }  
154
.uk-section-large { /* Large section padding */ }
155
.uk-section-xlarge { /* Extra large section padding */ }
156

157
/* Section Theme Variants */
158
.uk-section-default { /* Default section styling */ }
159
.uk-section-muted { /* Muted background section */ }
160
.uk-section-primary { /* Primary themed section */ }
161
.uk-section-secondary { /* Secondary themed section */ }
162

163
/* Section Overlap */
164
.uk-section-overlap { /* Overlapping section positioning */ }
165
```
166

167
**Usage Examples:**
168

169
```html
170
<!-- Hero Section -->
171
<section class="uk-section uk-section-primary uk-section-large">
172
    <div class="uk-container">
173
        <h1 class="uk-heading-large">Welcome</h1>
174
        <p class="uk-text-lead">Hero section content</p>
175
    </div>
176
</section>
177

178
<!-- Content Section -->
179
<section class="uk-section">
180
    <div class="uk-container">
181
        <div class="uk-grid-match uk-child-width-1-2@m" uk-grid>
182
            <div>Content block 1</div>
183
            <div>Content block 2</div>
184
        </div>
185
    </div>
186
</section>
187

188
<!-- Muted Background Section -->
189
<section class="uk-section uk-section-muted">
190
    <div class="uk-container">
191
        <h2>Features</h2>
192
        <p>Feature description in muted section.</p>
193
    </div>
194
</section>
195
```
196

197
### Flexbox Utilities
198

199
Flexbox layout utilities for advanced layout control.
200

201
```css { .api }
202
/* Flex Container */
203
.uk-flex { /* Display flex */ }
204
.uk-flex-inline { /* Display inline-flex */ }
205

206
/* Flex Direction */
207
.uk-flex-row { /* Row direction (default) */ }
208
.uk-flex-row-reverse { /* Reverse row direction */ }
209
.uk-flex-column { /* Column direction */ }
210
.uk-flex-column-reverse { /* Reverse column direction */ }
211

212
/* Flex Wrap */
213
.uk-flex-wrap { /* Allow wrapping */ }
214
.uk-flex-nowrap { /* Prevent wrapping */ }
215
.uk-flex-wrap-reverse { /* Reverse wrap */ }
216

217
/* Justify Content */
218
.uk-flex-left { /* Justify left */ }
219
.uk-flex-center { /* Justify center */ }
220
.uk-flex-right { /* Justify right */ }
221
.uk-flex-between { /* Justify space-between */ }
222
.uk-flex-around { /* Justify space-around */ }
223

224
/* Align Items */
225
.uk-flex-stretch { /* Align stretch */ }
226
.uk-flex-top { /* Align top */ }
227
.uk-flex-middle { /* Align middle */ }
228
.uk-flex-bottom { /* Align bottom */ }
229

230
/* Flex Item Properties */
231
.uk-flex-1 { /* Flex grow 1 */ }
232
.uk-flex-auto { /* Flex auto */ }
233
.uk-flex-none { /* Flex none */ }
234
```
235

236
**Usage Examples:**
237

238
```html
239
<!-- Horizontal Navigation -->
240
<nav class="uk-flex uk-flex-between uk-flex-middle">
241
    <div class="uk-logo">Logo</div>
242
    <ul class="uk-flex uk-list">
243
        <li><a href="#">Home</a></li>
244
        <li><a href="#">About</a></li>
245
        <li><a href="#">Contact</a></li>
246
    </ul>
247
</nav>
248

249
<!-- Centered Content -->
250
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport">
251
    <div class="uk-text-center">
252
        <h1>Centered Content</h1>
253
        <p>Vertically and horizontally centered.</p>
254
    </div>
255
</div>
256
```
257

258
### Position Utilities
259

260
Positioning utilities for element placement and stacking.
261

262
```css { .api }
263
/* Position Types */
264
.uk-position-relative { /* Relative positioning */ }
265
.uk-position-absolute { /* Absolute positioning */ }
266
.uk-position-fixed { /* Fixed positioning */ }
267
.uk-position-sticky { /* Sticky positioning */ }
268

269
/* Position Placement */
270
.uk-position-top { /* Position at top */ }
271
.uk-position-bottom { /* Position at bottom */ }
272
.uk-position-left { /* Position at left */ }
273
.uk-position-right { /* Position at right */ }
274
.uk-position-top-left { /* Position at top-left */ }
275
.uk-position-top-right { /* Position at top-right */ }
276
.uk-position-bottom-left { /* Position at bottom-left */ }
277
.uk-position-bottom-right { /* Position at bottom-right */ }
278
.uk-position-center { /* Position at center */ }
279
.uk-position-center-left { /* Position at center-left */ }
280
.uk-position-center-right { /* Position at center-right */ }
281

282
/* Position Sizes */
283
.uk-position-small { /* Small positioned element */ }
284
.uk-position-medium { /* Medium positioned element */ }
285
.uk-position-large { /* Large positioned element */ }
286

287
/* Position Cover */
288
.uk-position-cover { /* Cover entire parent */ }
289

290
/* Z-Index */
291
.uk-position-z-index { /* Default z-index */ }
292
.uk-position-z-index-zero { /* Zero z-index */ }
293
.uk-position-z-index-negative { /* Negative z-index */ }
294
```
295

296
**Usage Examples:**
297

298
```html
299
<!-- Overlay on Image -->
300
<div class="uk-position-relative">
301
    <img src="image.jpg" alt="Background">
302
    <div class="uk-position-absolute uk-position-bottom-left uk-position-small">
303
        <h3 class="uk-margin-remove">Image Caption</h3>
304
    </div>
305
</div>
306

307
<!-- Fixed Header -->
308
<header class="uk-position-fixed uk-position-top uk-width-1-1 uk-background-default">
309
    <nav class="uk-container">
310
        <!-- Navigation content -->
311
    </nav>
312
</header>
313

314
<!-- Centered Modal Content -->
315
<div class="uk-position-fixed uk-position-cover uk-flex uk-flex-center uk-flex-middle">
316
    <div class="uk-card uk-card-default uk-card-body">
317
        <h3>Modal Content</h3>
318
    </div>
319
</div>
320
```
321

322
### Height Utilities
323

324
Height control utilities for element sizing.
325

326
```css { .api }
327
/* Viewport Heights */
328
.uk-height-1-1 { /* Full height of container */ }
329
.uk-height-viewport { /* Full viewport height */ }
330
.uk-height-small { /* Small fixed height */ }
331
.uk-height-medium { /* Medium fixed height */ }
332
.uk-height-large { /* Large fixed height */ }
333

334
/* Min/Max Heights */
335
.uk-height-max-small { /* Max small height */ }
336
.uk-height-max-medium { /* Max medium height */ }  
337
.uk-height-max-large { /* Max large height */ }
338
```
339

340
**Usage Examples:**
341

342
```html
343
<!-- Full Viewport Hero -->
344
<section class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle uk-background-cover" data-src="hero.jpg" uk-img>
345
    <div class="uk-text-center">
346
        <h1 class="uk-heading-large">Full Height Hero</h1>
347
    </div>
348
</section>
349

350
<!-- Sidebar with Full Height -->
351
<div class="uk-grid uk-grid-collapse" uk-grid>
352
    <div class="uk-width-1-4">
353
        <aside class="uk-height-viewport uk-background-muted">
354
            <!-- Sidebar content -->
355
        </aside>
356
    </div>
357
    <div class="uk-width-3-4">
358
        <!-- Main content -->
359
    </div>
360
</div>
361
```
362

363
## JavaScript Grid Component
364

365
JavaScript functionality for advanced grid features.
366

367
```javascript { .api }
368
/**
369
 * Grid component for masonry and advanced layouts
370
 */
371
UIkit.grid(element: HTMLElement, options?: {
372
  /** Grid masonry layout */
373
  masonry?: boolean;
374
  /** Grid item parallax effect */
375
  parallax?: number;
376
  /** Grid margins */
377
  margin?: string;
378
  /** First column class */
379
  'first-column'?: string;
380
}): GridComponent;
381

382
interface GridComponent {
383
  /** Grid element */
384
  $el: HTMLElement;
385
  /** Update grid layout */
386
  update(): void;
387
}
388
```
389

390
**Usage Examples:**
391

392
```javascript
393
// Create masonry grid
394
const grid = UIkit.grid('#masonry-grid', {
395
  masonry: true,
396
  margin: 'uk-grid-margin'
397
});
398

399
// Update grid after content changes
400
grid.update();
401
```
402

403
```html
404
<!-- Masonry Grid -->
405
<div id="masonry-grid" class="uk-child-width-1-3@m" uk-grid="masonry: true">
406
    <div>
407
        <div class="uk-card uk-card-default uk-card-body">
408
            <p>Variable height content 1</p>
409
        </div>
410
    </div>
411
    <div>
412
        <div class="uk-card uk-card-default uk-card-body">
413
            <p>Variable height content 2<br>Multiple lines<br>More content</p>
414
        </div>
415
    </div>
416
    <div>
417
        <div class="uk-card uk-card-default uk-card-body">
418
            <p>Variable height content 3</p>
419
        </div>
420
    </div>
421
</div>
422
```