diff --git a/docs/toolbars/docs-navbar.html b/docs/toolbars/docs-navbar.html
index 7d614210..01bbb3c4 100755
--- a/docs/toolbars/docs-navbar.html
+++ b/docs/toolbars/docs-navbar.html
@@ -48,7 +48,7 @@
 	<p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>
 
 	<div data-role="footer">
-		<div data-role="navbar" data-grid="b">
+		<div data-role="navbar">
 			<ul>
 				<li><a href="#" class="ui-btn-active">One</a></li>
 				<li><a href="#">Two</a></li>
@@ -111,7 +111,7 @@
 		<h1>I'm a header</h1>
 		<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
 				
-		<div data-role="navbar" data-grid="b">
+		<div data-role="navbar">
 			<ul>
 				<li><a href="#">One</a></li>
 				<li><a href="#">Two</a></li>
@@ -125,7 +125,7 @@
 	<p>Icons can be added to navbar items by adding the <code>data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
 
 	<div data-role="footer">
-		<div data-role="navbar" data-grid="b">
+		<div data-role="navbar">
 			<ul>
 				<li><a href="#" data-icon="grid">Summary</a></li>
 				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
@@ -137,7 +137,7 @@
 	<p>Icons can be stacked above the labels by adding the <code>data-iconpos="top"</code> attribute to each anchor.</p>
 
 	<div data-role="footer">
-		<div data-role="navbar" data-grid="b">
+		<div data-role="navbar">
 			<ul>
 				<li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li>
 				<li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top">Favs</a></li>
@@ -185,7 +185,7 @@
 	<p>Navbars can be set to any theme color by <code>data-theme</code> attribute to the links and specifying any theme swatch.</p>
 
 	<div data-role="footer">
-		<div data-role="navbar" data-theme="e"  data-grid="b">
+		<div data-role="navbar" data-theme="e" >
 			<ul>
 				<li><a href="#" data-icon="grid" data-iconpos="top" data-theme="b">Summary</a></li>
 				<li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top" data-theme="b">Favs</a></li>
diff --git a/js/jquery.mobile.grid.js b/js/jquery.mobile.grid.js
index 3654c5c0..ed5457bb 100644
--- a/js/jquery.mobile.grid.js
+++ b/js/jquery.mobile.grid.js
@@ -8,31 +8,31 @@
 $.fn.grid = function(options){
 	return $(this).each(function(){
 		var o = $.extend({
-			grid: 'a'
+			grid: null
 		},options);
-		
-		$(this).addClass('ui-grid-' + o.grid);
+	
 			
 		var $kids = $(this).children(),
+			gridCols = {a: 2, b:3, c:4, d:5},
+			grid = o.grid,
 			iterator;
 			
-			switch( o.grid ){
-				case 'a':
-					iterator = 2;
-				break;
-				case 'b':
-					iterator = 3;
-				break;
-				case 'c':
-					iterator = 4;
-				break;
-				case 'd':
-					iterator = 5;
-				break;
+			if( !grid ){
+				if( $kids.length <= 5 ){
+					for(var letter in gridCols){
+						if(gridCols[letter] == $kids.length){ grid = letter; }
+					}
+				}
+				else{
+					grid = 'a';
+				}
 			}
-		
-			$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
-			$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
+			iterator = gridCols[grid];
+			
+		$(this).addClass('ui-grid-' + grid);
+	
+		$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
+		$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
 			
 		if(iterator > 2){	
 			$kids.filter(':nth-child(3n+3)').addClass('ui-block-c');
diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js
index 4e7a5de7..1556a4c2 100755
--- a/js/jquery.mobile.navbar.js
+++ b/js/jquery.mobile.navbar.js
@@ -8,7 +8,7 @@
 $.widget( "mobile.navbar", $.mobile.widget, {
 	options: {
 		iconpos: 'top',
-		grid: 'a'
+		grid: null
 	},
 	_create: function(){
 		var $navbar = this.element,