Grid CSS is based on a 12 column layout, for example a 3 column layout can be defined as;
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col3</div>
</div>
</div>
As long as the sum of columns are 12, various combinations are supported.
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
Multiple rows are enabled using more than one .ui-grid-row elements.
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col3</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col3</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col3</div>
</div>
</div>
Adding .ui-grid-responsive to the container makes the content responsive to screen sizes.
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
.ui-grid-fixed enables fixed width for the content.
<div class="ui-grid ui-grid-fixed">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
<h3 class="first">Responsive and Fluid</h3>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-2">2</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-3">3</div>
<div class="ui-grid-col-3">3</div>
<div class="ui-grid-col-3">3</div>
<div class="ui-grid-col-3">3</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-6">6</div>
<div class="ui-grid-col-6">6</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12">12</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-3">3</div>
<div class="ui-grid-col-9">9</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-3">3</div>
<div class="ui-grid-col-5">5</div>
<div class="ui-grid-col-4">4</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-2">2</div>
<div class="ui-grid-col-3">3</div>
<div class="ui-grid-col-1">1</div>
</div>
</div>
<h3>Multiline</h3>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
</div>
<h3>Fixed</h3>
<div class="ui-grid ui-grid-fixed">
<div class="ui-grid-row">
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
<div class="ui-grid-col-1">1</div>
</div>
</div>
<h3>Not Responsive</h3>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-6">6</div>
<div class="ui-grid-col-6">6</div>
</div>
</div>