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.