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.
We create an HTML page and use jQuery Mobile to make a grid layout on it.
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%.
When we render this HTML, we see that the webpage is divided into three columns, which is the grid layout.