Grid CSS is based on a 12 column layout. Columns are prefixed with ui-g-* and they should be a descendant of a container having ui-g class. A simple 3 column layout can be defined as;

Col1

Col2

Col3

Multi Line

When the number of columns exceed 12, columns wrap to a new line.

<div class="ui-g">
    <div class="ui-g-6">Col1</div>
    <div class="ui-g-6">Col2</div>
    <div class="ui-g-6">Col3</div>
    <div class="ui-g-6">Col4</div>
</div>
 

Col1

Col2

Col3

Col3

Same can also be achieved by having two ui-g containers to semantically define a row.

<div class="ui-g">
    <div class="ui-g-6">Col1</div>
    <div class="ui-g-6">Col2</div>
<div class="ui-g">
    <div class="ui-g-6">Col3</div>
    <div class="ui-g-6">Col4</div>
 

Col1

Col2

Col3

Columns can be nested to create more complex layouts.

6

6

12

4

Direct children of ui-g has the same height automatically, in example above if the inside columns is likely to have different height with different content.

<div class="ui-g">
    <div class="ui-g-8 ui-g-nopad">
        <div class="ui-g-6">6 <br /><br /><br /> Content </div>
        <div class="ui-g-6">6</div>
        <div class="ui-g-12">12</div>
    </div>
    <div class="ui-g-4">4</div>
</div>
 

6 Content

6

12

4

Solution is wrapping the internal divs inside a ui-g as well.

<div class="ui-g">
    <div class="ui-g-8 ui-g-nopad">
        <div class="ui-g">
            <div class="ui-g-12">12</div>
        </div>
    </div>
    <div class="ui-g-4">4</div>
</div>
 

6 Content

6

12

Responsive

Responsive layout is achieved by applying additional classes to the columns whereas ui-g-* define the default behavior. Four screen sizes are supported with different breakpoints.

Most of the time, ui-md- styles are used with default ui-g- classes, to customize small or large screens apply ui-sm, ui-lg and ui-xl can be utilized.

In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and default behavior gets only displayed in a mobile phone where each column is rendered in a separate row.

ui-g-12 ui-md-6 ui-lg-3

ui-g-12 ui-md-6 ui-lg-3

ui-g-12 ui-md-6 ui-lg-3

ui-g-12 ui-md-6 ui-lg-3

In this second example below, 3 columns are displayed in large screens and in medium screens first two columns are placed side by side where the last column displayed below them. In a mobile phone, they all get displayed in a separate row.

<div class="ui-g">
    <div class="ui-g-12 ui-md-6 ui-lg-4">ui-g-12 ui-md-6 ui-lg-4</div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">ui-g-12 ui-md-6 ui-lg-4</div>
    <div class="ui-g-12 ui-lg-4">ui-g-12 ui-lg-4</div>
</div>
 

ui-g-12 ui-md-6 ui-lg-4

ui-g-12 ui-md-6 ui-lg-4

ui-g-12 ui-lg-4

A column has a default padding by default, to remove it you may apply ui-g-nopad style class.

Offset

Offset classes allow defining a left margin on a column. Following sample adds a margin left to the second column for medium sized screens.

<div class="ui-g">
    <div class="ui-g-12 ui-md-4">ui-g-12 ui-md-4</div>
</div>

The list of offset classes varying within a range of 1 to 12.

Source