Responsive grid examples

These are standard grids that are made responsive by adding a custom class to the wrapper and writing a few simple styles to stack all grid blocks at narrow widths and only float above 36em (576 pixels) wide.

Grid A (50/50)

Block A
Block B

Grid B (33/33/33)

Block A
Block B
Block C

Grid C (25/25/25/25)

A
B
C
D

Grid D (20/20/20/20/20)

A
B
C
D
E

Creating a custom responsive grid

Creating responsive layouts is easy, but there are a few key things to keep in mind.

  1. Create a style override stylesheet and include it after the jQuery Mobile framework stylesheet. This will hold all your custom styles, tweaks to the default widgets and media queries.
  2. Start by writing the styles you want to see at the narrowest screen width (i.e. "mobile first"). These should be outside a media query. For example, we'd start with each of our grid containers set to 100% width and not floated so they start off stacked at smartphone widths.
  3. Next, decide the first breakpoint by seeing where your content and design can take advantage of a wider width. Write a media query block that uses ems instead of pixels to ensure the layout will adapt to font size changes. To calculate the width, simply divide the target breakpoint (320px) with by 16px (the default font size) to get the em-based width (20em).
    @media all and (min-width: 36em){
    	/* Styles that apply above 576px go here */
    }
    
  4. Build additional breakpoints on top of each other at increasingly wider widths This means that the next breakpoint can add additional styles that build on top of the basic styles and those in the first breakpoint.

Example styles

Here are the styles you need to stack all the grids. These all work by adding the rwd-stack to each the grid container.


/* Stack all blocks to start */
.rwd-stack .ui-block-a, 
.rwd-stack .ui-block-b, 
.rwd-stack .ui-block-c,
.rwd-stack .ui-block-d,
.rwd-stack .ui-block-e { 
	width: 100%; 
	float:none; 
}

/* Float and set widths above 576px (36em * 16px) */
@media all and (min-width: 36em){
	/* Float all blocks */
	.rwd-stack .ui-block-a, 
	.rwd-stack .ui-block-b, 
	.rwd-stack .ui-block-c,
	.rwd-stack .ui-block-d,
	.rwd-stack .ui-block-e { 
		float:left; 
	}
	/* Set widths for 2-up grids */
	.rwd-stack.ui-grid-a .ui-block-a, 
	.rwd-stack.ui-grid-a .ui-block-b { 
		width: 49.95%; 
	}
	/* Set widths for 3-up grids */
	.rwd-stack.ui-grid-b .ui-block-a, 
	.rwd-stack.ui-grid-b .ui-block-b, 
	.rwd-stack.ui-grid-b .ui-block-c { 
		width: 33.25%; 
	}
	/* Set widths for 4-up grids */
	.rwd-stack.ui-grid-c .ui-block-a, 
	.rwd-stack.ui-grid-c .ui-block-b, 
	.rwd-stack.ui-grid-c .ui-block-c,
	.rwd-stack.ui-grid-c .ui-block-d { 
		width: 24.925%;
	}
	/* Set widths for 5-up grids */
	.rwd-stack.ui-grid-d .ui-block-a, 
	.rwd-stack.ui-grid-d .ui-block-b, 
	.rwd-stack.ui-grid-d .ui-block-c,
	.rwd-stack.ui-grid-d .ui-block-d,
	.rwd-stack.ui-grid-d .ui-block-e { 
		width: 19.925%;
	}
}