Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

jquery
communitycreator
mobile
gridlayout

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

Ayush Trivedi

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.

Example of "Jquery Mobile"

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.

RELATED TAGS

jquery
communitycreator
mobile
gridlayout
RELATED COURSES

View all Courses

Keep Exploring