Using the jQueryMobile we can split our screen into columns. We just need to choose in advance the number of columns we want and use the relevant CSS class. Using the ‘ui-grid-a’ CSS class we shall get two columns, using the ‘ui-grid-b’ CSS class we shall get three columns and so on.
In order to get rows we should add div elements assigned with the ui-block-_ elements. Doing so will indirectly split the columns in to rows. The following video clip explains it.
The code below is the one I was using when creating this video clip. You can find more code samples and video clips for using the jQueryMobile library in my free courses website at http://abelski.lifemichael.com.
<!DOCTYPE html>
<html>
<head>
<title>My Cycling</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="e">
<div data-role="header">
<h1>Sample Demo</h1>
</div>
<div data-role="content" data-theme="e">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">B</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">C</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">D</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">B</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">C</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">D</div>
</div>
</div>
</div>
<div data-role="footer">
<h4>www.lifemichael.com</h4>
</div>
</div>
</body>
</html>
