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-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.
View all Courses