This lesson will be very quick but introduce an important concept. Layouts are different ways of styling UI elements together. The most simple is a box. This is done by first creating widgets then putting it into the box layout like below.

from IPython.display import display
from ipywidgets import widgets

A = widgets.FloatSlider(value=50,
                          min=10,
    max=200,
                      step=.1,
                        description='Value:',
)

B = widgets.FloatSlider(value=50,
                          min=10,
    max=200,
                      step=.1,
                        description='Value:',
)

C = widgets.FloatSlider(value=50,
                          min=10,
    max=200,
                      step=.1,
                        description='Value:',
)

box_items = widgets.Box([A,B,C])
display(box_items)

The HBox layout is a horizontal box layout.

box_items = widgets.HBox([A,B,C])
display(box_items)

The VBox layout is a vertical box layout.

box_items = widgets.VBox([A,B,C])
display(box_items)

If we use Layout we can pass the argument grid_template_columns with repeat(3, 300px) where the 3 is the number of columns to use and then 300px is the width of for the widget.

items = []
for i in range(9):
    items.append(widgets.FloatSlider(value=50,
                          min=10,
    max=200,
                      step=.1,
                        description='Value {}:'.format(i+1),
))
widgets.GridBox(items, layout=widgets.Layout(grid_template_columns="repeat(3, 300px)"))

The Accordion layout is nice if you want to look at just one widget at a time. You add in the widgets with the children argument. Then from there you can set each title with set_title when you pass the index for setting a title and the title to set. Below is an example.

accordion = widgets.Accordion(children=[A, B])
accordion.set_title(0, 'Title 1')
accordion.set_title(1, 'Title 2')
display(accordion)

A similar option is to use tabs like below.

tab = widgets.Tab([A, B])
tab.set_title(0, 'Title 1')
tab.set_title(1, 'Title 2')
display(tab)