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>