{"id":26,"date":"2023-08-25T17:32:30","date_gmt":"2023-08-25T17:32:30","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=26"},"modified":"2023-08-25T17:32:30","modified_gmt":"2023-08-25T17:32:30","slug":"grid-layout","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/grid-layout\/","title":{"rendered":"Grid Layout"},"content":{"rendered":"

\nGrid Layout<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Multi-column layout grids<\/p>\n

\n\t\t\t

Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example).<\/p>\n\t\t\t

The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid<\/code>. <\/p>\n\t\t\t

There are four preset layouts that can be used in any situation that requires columns:<\/p>\n\t\t\t

    \n\t\t\t\t
  • \ntwo<\/strong>-column (using the ui-grid-a<\/code> class)<\/li>\n\t\t\t\t
  • \nthree<\/strong>-column (using the ui-grid-b<\/code> class)<\/li>\n\t\t\t\t
  • \nfour<\/strong>-column (using the ui-grid-c<\/code> class)<\/li>\n\t\t\t\t
  • \nfive<\/strong>-column (using the ui-grid-d<\/code> class)<\/li>\n\t\t\t<\/ul>\n\t\t\t

    Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. <\/p>\n\t\t\t

    Within the grid container, child elements are assigned ui-block-a\/b\/c\/d\/e<\/code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The ui-block-a<\/code> class essentially clears the floats which will start a new line (see multiple row grids, below).<\/p>\n\n\t\t\t

    Two column grids<\/h3>\n\n\t\t\t

    To build a two-column (50\/50%) layout, start with a container with a class<\/code> of ui-grid-a<\/code>, and add two child containers inside it classed with ui-block-a<\/code> for the first column and ui-block-b<\/code> for the second:<\/p>\n\n

    \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t
    1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
    		\n\t\t\t\t\t
    <div<\/span> class<\/span>="ui-grid-a"<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> class<\/span>="ui-block-a"<\/span>><\/span><strong<\/span>><\/span>I'm Block A<\/strong<\/span>><\/span> and text inside will wrap<\/div<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> class<\/span>="ui-block-b"<\/span>><\/span><strong<\/span>><\/span>I'm Block B<\/strong<\/span>><\/span> and text inside will wrap<\/div<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><!-- \/grid-a --><\/span>u<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\t
    The above markup produces the following content layout:<\/p>\n\t\t\t