# Centered Grid Example

An example of how to express constraints with respect to helpers attributes

The layour in this example illustrates how to access and use the attributes of helpers to complex layouts. All helpers expose the same attributes (left, right, top, bottom, width, height, h_center, v_center) as any widget.

Tip

To see this example in action, download it from `centered_grid` and run:

    $ enaml-run centered_grid.enaml

## Screenshot

## Example Enaml Code

    #------------------------------------------------------------------------------
    # Copyright (c) 2013-2025, Nucleic Development Team.
    #
    # Distributed under the terms of the Modified BSD License.
    #
    # The full license is in the file LICENSE, distributed with this software.
    #------------------------------------------------------------------------------
    """ An example of how to express constraints with respect to helpers attributes

    The layour in this example illustrates how to access and use the attributes of
    helpers to complex layouts. All helpers expose the same attributes (left,
    right, top, bottom, width, height, h_center, v_center) as any widget.

    << autodoc-me >>
    """
    from enaml.layout.api import grid, hbox, spacer, align
    from enaml.widgets.api import Window, Container, Label, PushButton

    enamldef Main(Window):
        Container:
            layout_constraints => ():
                g = grid((lbl_a, lbl_b, lbl_c),
                            (lbl_d, lbl_e, lbl_f),
                            (lbl_g, lbl_g, lbl_g),
                            (btn_1, btn_2, btn_3))
                constraints = [hbox(spacer,g, spacer) ,
                               align('h_center', g, contents_h_center)
                ]
                return constraints
            Label: lbl_a:
                text = "Label A"
            Label: lbl_b:
                text = "Label B"
            Label: lbl_c:
                text = "Label C"
            Label: lbl_d:
                text = "Label D"
            Label: lbl_e:
                text = "Label E"
            Label: lbl_f:
                text = "Label F"
            Label: lbl_g:
                text = "Label G"
            PushButton: btn_1:
                text = "Button 1"
            PushButton: btn_2:
                text = "Button 2"
            PushButton: btn_3:
                text = "Button 3"