Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create five-column grid in jQuery Mobile ?

  • Difficulty Level : Medium
  • Last Updated : 31 Oct, 2021

Grids in jQuery Mobile are elements that have 100% width, are completely invisible having no borders, backgrounds, padding, or margins. Inside the grid container, the elements are assigned the classes with the names of ui-block-a/b/c/d/e. This makes each “block” element appear in the form of a grid by floating next to each other.

Creating a five-column grid: We can create a five-column grid by using the container classes as ui-block-a/b/c/d. All the column widths will be 20% each and occupy the full width of the screen. The below example will demonstrate this approach.



<!DOCTYPE html>
    <link rel="stylesheet"
    <script src=
        <h1 style="color:green">
    <h2>Five Column Grid </h2>
    <div class="ui-grid-d">
        <div class="ui-block-a">
            <div class="ui-bar ui-bar-a">
                First Block
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-a">
                Second Block
        <div class="ui-block-c">
            <div class="ui-bar ui-bar-a">
                Third Block
        <div class="ui-block-d">
            <div class="ui-bar ui-bar-a">
                Fourth Block
        <div class="ui-block-e">
            <div class="ui-bar ui-bar-a">
                Fifth Block


Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!