0
# Layout System
1
2
Container components for organizing UI elements into structured layouts with responsive design support, enabling flexible arrangement of components in rows, columns, tabs, and other organizational patterns.
3
4
## Capabilities
5
6
### Basic Layout Containers
7
8
Fundamental layout containers for organizing components in horizontal and vertical arrangements with responsive design support.
9
10
```python { .api }
11
class Row:
12
def __init__(
13
self,
14
variant="default",
15
visible=True,
16
elem_id=None,
17
elem_classes=None,
18
render=True,
19
equal_height=True,
20
**kwargs
21
):
22
"""
23
Horizontal layout container for component arrangement.
24
25
Parameters:
26
- variant: Layout variant ("default", "panel", "compact")
27
- equal_height: Whether components should have equal height
28
"""
29
30
def __enter__(self):
31
"""Enter context manager for component definition."""
32
33
def __exit__(self, exc_type, exc_val, exc_tb):
34
"""Exit context manager."""
35
36
class Column:
37
def __init__(
38
self,
39
scale=None,
40
min_width=320,
41
variant="default",
42
visible=True,
43
elem_id=None,
44
elem_classes=None,
45
render=True,
46
**kwargs
47
):
48
"""
49
Vertical layout container for component stacking.
50
51
Parameters:
52
- scale: Relative size compared to other columns
53
- min_width: Minimum column width in pixels
54
- variant: Layout variant ("default", "panel", "compact")
55
"""
56
57
def __enter__(self):
58
"""Enter context manager for component definition."""
59
60
def __exit__(self, exc_type, exc_val, exc_tb):
61
"""Exit context manager."""
62
63
class Group:
64
def __init__(
65
self,
66
visible=True,
67
elem_id=None,
68
elem_classes=None,
69
render=True,
70
**kwargs
71
):
72
"""
73
Logical component grouping without visual changes.
74
Used for organizing components logically without affecting layout.
75
"""
76
77
def __enter__(self):
78
"""Enter context manager for component definition."""
79
80
def __exit__(self, exc_type, exc_val, exc_tb):
81
"""Exit context manager."""
82
```
83
84
Usage examples:
85
86
```python
87
import gradio as gr
88
89
with gr.Blocks() as demo:
90
with gr.Row():
91
# Components arranged horizontally
92
input1 = gr.Textbox(label="Input 1")
93
input2 = gr.Textbox(label="Input 2")
94
95
with gr.Column():
96
# Components arranged vertically
97
output1 = gr.Textbox(label="Output 1")
98
output2 = gr.Textbox(label="Output 2")
99
100
# Nested layouts
101
with gr.Row():
102
with gr.Column(scale=2):
103
main_input = gr.Textbox(label="Main Input")
104
with gr.Column(scale=1):
105
submit_btn = gr.Button("Submit")
106
```
107
108
### Tabbed Organization
109
110
Components for organizing content into tabbed interfaces with navigation and dynamic content loading.
111
112
```python { .api }
113
class Tabs:
114
def __init__(
115
self,
116
selected=None,
117
visible=True,
118
elem_id=None,
119
elem_classes=None,
120
render=True,
121
**kwargs
122
):
123
"""
124
Tabbed content container for organizing sections.
125
126
Parameters:
127
- selected: Initially selected tab (index or label)
128
"""
129
130
def __enter__(self):
131
"""Enter context manager for tab definition."""
132
133
def __exit__(self, exc_type, exc_val, exc_tb):
134
"""Exit context manager."""
135
136
def change(self, fn, inputs=None, outputs=None, **kwargs):
137
"""Event handler for tab changes."""
138
139
class Tab:
140
def __init__(
141
self,
142
label,
143
id=None,
144
elem_id=None,
145
elem_classes=None,
146
render=True,
147
interactive=True,
148
visible=True,
149
**kwargs
150
):
151
"""
152
Individual tab item within Tabs container.
153
154
Parameters:
155
- label: Tab display name
156
- id: Unique identifier for the tab
157
- interactive: Whether tab can be selected
158
"""
159
160
def __enter__(self):
161
"""Enter context manager for tab content."""
162
163
def __exit__(self, exc_type, exc_val, exc_tb):
164
"""Exit context manager."""
165
166
def select(self, fn, inputs=None, outputs=None, **kwargs):
167
"""Event handler for tab selection."""
168
169
# Alias for Tab
170
TabItem = Tab
171
```
172
173
Usage example:
174
175
```python
176
import gradio as gr
177
178
with gr.Blocks() as demo:
179
with gr.Tabs():
180
with gr.Tab("Text Processing"):
181
text_input = gr.Textbox(label="Input Text")
182
text_output = gr.Textbox(label="Processed Text")
183
text_btn = gr.Button("Process")
184
185
with gr.Tab("Image Processing"):
186
image_input = gr.Image(label="Input Image")
187
image_output = gr.Image(label="Processed Image")
188
image_btn = gr.Button("Process")
189
190
with gr.Tab("Settings"):
191
settings = gr.Slider(label="Processing Strength")
192
```
193
194
### Advanced Layout Components
195
196
Specialized layout components for specific organizational patterns including collapsible sections, sidebars, draggable elements, and accordion-style layouts.
197
198
```python { .api }
199
class Accordion:
200
def __init__(
201
self,
202
label,
203
open=True,
204
visible=True,
205
elem_id=None,
206
elem_classes=None,
207
render=True,
208
**kwargs
209
):
210
"""
211
Collapsible content sections.
212
213
Parameters:
214
- label: Accordion section title
215
- open: Whether section starts expanded
216
"""
217
218
def __enter__(self):
219
"""Enter context manager for accordion content."""
220
221
def __exit__(self, exc_type, exc_val, exc_tb):
222
"""Exit context manager."""
223
224
class Sidebar:
225
def __init__(
226
self,
227
position="left",
228
open=True,
229
visible=True,
230
elem_id=None,
231
elem_classes=None,
232
render=True,
233
**kwargs
234
):
235
"""
236
Sidebar layout container for navigation.
237
238
Parameters:
239
- position: Sidebar position ("left" or "right")
240
- open: Whether sidebar starts open
241
"""
242
243
def __enter__(self):
244
"""Enter context manager for sidebar content."""
245
246
def __exit__(self, exc_type, exc_val, exc_tb):
247
"""Exit context manager."""
248
249
class Draggable:
250
def __init__(
251
self,
252
visible=True,
253
elem_id=None,
254
elem_classes=None,
255
render=True,
256
**kwargs
257
):
258
"""
259
Draggable container for rearrangeable UIs.
260
Allows users to drag and reorder contained components.
261
"""
262
263
def __enter__(self):
264
"""Enter context manager for draggable content."""
265
266
def __exit__(self, exc_type, exc_val, exc_tb):
267
"""Exit context manager."""
268
```
269
270
Usage examples:
271
272
```python
273
import gradio as gr
274
275
with gr.Blocks() as demo:
276
# Accordion for collapsible sections
277
with gr.Accordion("Advanced Settings", open=False):
278
advanced_option1 = gr.Slider(label="Option 1")
279
advanced_option2 = gr.Checkbox(label="Enable feature")
280
281
# Sidebar for navigation
282
with gr.Sidebar():
283
gr.Markdown("## Navigation")
284
nav_btn1 = gr.Button("Page 1")
285
nav_btn2 = gr.Button("Page 2")
286
287
# Main content area
288
main_content = gr.Textbox(label="Main Content")
289
```
290
291
## Layout Patterns and Best Practices
292
293
### Responsive Design
294
295
Gradio layouts automatically adapt to different screen sizes, but you can control responsiveness:
296
297
```python
298
with gr.Row(equal_height=True):
299
# Equal height columns
300
with gr.Column(scale=2, min_width=400):
301
# Takes 2/3 of available width, minimum 400px
302
main_content = gr.Textbox()
303
304
with gr.Column(scale=1, min_width=200):
305
# Takes 1/3 of available width, minimum 200px
306
sidebar_content = gr.Button()
307
```
308
309
### Nested Layouts
310
311
Complex layouts can be created by nesting containers:
312
313
```python
314
with gr.Row():
315
with gr.Column():
316
# Left column with tabs
317
with gr.Tabs():
318
with gr.Tab("Input"):
319
input_components = gr.Textbox()
320
with gr.Tab("Settings"):
321
settings = gr.Slider()
322
323
with gr.Column():
324
# Right column with accordion
325
with gr.Accordion("Results"):
326
output_components = gr.Textbox()
327
```
328
329
### Dynamic Layout Updates
330
331
Layouts can be modified dynamically through event handlers:
332
333
```python
334
def toggle_visibility(visible):
335
return gr.update(visible=not visible)
336
337
toggle_btn = gr.Button("Toggle Section")
338
hidden_section = gr.Column(visible=False)
339
340
toggle_btn.click(
341
toggle_visibility,
342
inputs=hidden_section,
343
outputs=hidden_section
344
)
345
```
346
347
## Layout Component Properties
348
349
### Common Properties
350
351
All layout components support these common properties:
352
353
```python { .api }
354
# Visibility and rendering
355
visible: bool = True # Whether component is visible
356
render: bool = True # Whether to render component
357
358
# Styling and identification
359
elem_id: str = None # HTML element ID
360
elem_classes: list = None # CSS classes for styling
361
362
# Layout-specific properties vary by component type
363
```
364
365
### Scale and Sizing
366
367
Control relative sizing in Row/Column layouts:
368
369
```python
370
with gr.Row():
371
gr.Column(scale=1) # Takes 1 unit of space
372
gr.Column(scale=2) # Takes 2 units of space (twice as wide)
373
gr.Column(scale=1) # Takes 1 unit of space
374
```
375
376
### Collapsible Content
377
378
Components for creating collapsible and expandable content sections.
379
380
```python { .api }
381
class Accordion:
382
def __init__(
383
self,
384
label=None,
385
open=True,
386
visible=True,
387
elem_id=None,
388
elem_classes=None,
389
render=True,
390
**kwargs
391
):
392
"""
393
Collapsible content container with toggle functionality.
394
395
Parameters:
396
- label: Accordion header text
397
- open: Whether accordion is initially open
398
"""
399
400
def __enter__(self):
401
"""Enter context manager for content definition."""
402
403
def __exit__(self, exc_type, exc_val, exc_tb):
404
"""Exit context manager."""
405
406
def change(self, fn, inputs=None, outputs=None, **kwargs):
407
"""Event handler for open/close changes."""
408
409
class Sidebar:
410
def __init__(
411
self,
412
position="left",
413
visible=True,
414
elem_id=None,
415
elem_classes=None,
416
render=True,
417
**kwargs
418
):
419
"""
420
Sidebar layout container for navigation or secondary content.
421
422
Parameters:
423
- position: Sidebar position ("left" or "right")
424
"""
425
426
def __enter__(self):
427
"""Enter context manager for sidebar content."""
428
429
def __exit__(self, exc_type, exc_val, exc_tb):
430
"""Exit context manager."""
431
```
432
433
### Tab Organization
434
435
Extended tab system with individual tab items and enhanced functionality.
436
437
```python { .api }
438
class TabItem:
439
def __init__(
440
self,
441
label,
442
id=None,
443
elem_id=None,
444
elem_classes=None,
445
render=True,
446
interactive=True,
447
visible=True,
448
**kwargs
449
):
450
"""
451
Individual tab item for use within Tabs container.
452
453
Parameters:
454
- label: Tab display label
455
- id: Unique identifier for tab
456
- interactive: Whether tab can be selected
457
"""
458
459
def __enter__(self):
460
"""Enter context manager for tab content."""
461
462
def __exit__(self, exc_type, exc_val, exc_tb):
463
"""Exit context manager."""
464
465
class Draggable:
466
def __init__(
467
self,
468
visible=True,
469
elem_id=None,
470
elem_classes=None,
471
render=True,
472
**kwargs
473
):
474
"""
475
Draggable container for moveable UI elements.
476
477
Allows components to be repositioned via drag and drop.
478
"""
479
480
def __enter__(self):
481
"""Enter context manager for draggable content."""
482
483
def __exit__(self, exc_type, exc_val, exc_tb):
484
"""Exit context manager."""
485
```
486
487
### Variant Styles
488
489
Some layouts support visual variants:
490
491
```python
492
gr.Row(variant="default") # Standard appearance
493
gr.Row(variant="panel") # Panel-style background
494
gr.Row(variant="compact") # Reduced spacing
495
```
496
497
## Integration with Components
498
499
### Component Sizing in Layouts
500
501
Components automatically adapt to their layout containers:
502
503
```python
504
with gr.Row():
505
# Components in rows share horizontal space
506
gr.Textbox(scale=2) # Takes more space
507
gr.Button(scale=1) # Takes less space
508
509
with gr.Column():
510
# Components in columns stack vertically
511
gr.Textbox() # Full width
512
gr.Button() # Full width
513
```
514
515
### Event Handling Across Layouts
516
517
Events can target components across different layout containers:
518
519
```python
520
with gr.Row():
521
input_text = gr.Textbox()
522
523
with gr.Column():
524
output_text = gr.Textbox()
525
process_btn = gr.Button()
526
527
# Event crosses layout boundaries
528
process_btn.click(
529
fn=process_function,
530
inputs=input_text, # From Row
531
outputs=output_text # From Column
532
)
533
```