Layout Group - ZUI Documentation

Summary

The layout group pattern is used to define sections in HTML. It is a simple form of a grid.

There are no attributes defined for this pattern.

Name	Description
`zui-layout-group`	The class that describes a row of elements that have the class zui-layout-item.
`zui-layout-item`	The class that describes a cell within an element that has the zui-layout-group class.

Example

Item

Markup

<div class="zui-layout-group">
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
</div>
<div class="zui-layout-group">
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
</div>
<div class="zui-layout-group">
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
</div>
<div class="zui-layout-group">
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
    <div class="zui-layout-item"><p>Item</p></div>
</div>

<div class="zui-layout-group zui-layout-group-3col">
    <div class="zui-layout-item"><p>Left</p></div>
    <div class="zui-layout-item"><p>Center</p></div>
    <div class="zui-layout-item"><p>Right</p></div>
</div>