How to create a grid layout on a webpage using jQuery Mobile

Overview

The jQuery Mobile framework defines CSS classes that let us create a grid layout on a webpage. This is a simple way to create a responsive grid layout.

Code

We create an HTML page and use jQuery Mobile to make a grid layout on it.

Explanation

• Line 4–6: We include jQuery on our webpage.

• Line 11: We create a container using div and class ui-grid-b. This class creates a container with 3 divisions of 33.3% each on the page. The class ui-grid-b is changed if we need more columns. For 2 columns, we use the class ui-grid-a. For 3 columns, we use the class ui-grid-b, and so on.

• Line 12: This div is the first block of the screen. We create a child div element with the class ui-block-a. This class tells us that the div is in the first block. The other child div, with classes ui-bar and ui-bar-a, gives a style to our current block.

• Line 13: This div represents the middle block of the screen. We need to add class ui-block-b to this div, which makes it the second column of the screen with a width of 33.3%.

• Line 14: This div represents the last block of the screen. We need to add class ui-block-c to this div, which makes it the third column of the screen with a width of 33.3%.

Result

When we render this HTML, we see that the webpage is divided into three columns, which is the grid layout.