jQuery Mobile是一個開源的用戶界面框架，它基于jQuery核心庫和jQuery UI庫，專為移動設備設計。它提供了豐富而靈活的布局系統，包括網格布局，它可以使頁面布局更加統一和規范，適應不同大小的屏幕，并提高用戶體驗。 網格布局是一種基于網格的布局系統，它將頁面劃分為等寬的列和行，然后將內容安排在這些列和行中。網格布局可以用于創建復雜的布局模式，例如響應式布局或多列布局，因此在移動設備和桌面瀏覽器中都非常受歡迎。 在jQuery Mobile中，網格布局通過ui-grid和ui-block類來實現。ui-grid類可以用來定義一個網格容器，而ui-block類可以用來定義一個網格項目。以下是一個簡單的示例代碼：

<div class="ui-grid-a">
<div class="ui-block-a"><p>左側內容</p></div>
<div class="ui-block-b"><p>右側內容</p></div>
</div>

在這個示例中，ui-grid-a類定義了一個兩列的網格容器，ui-block-a和ui-block-b類定義了兩個網格項目。在默認情況下，每個網格項目都會占據整個列的寬度。如果您想控制每一列的寬度，可以使用ui-block-*類，其中*表示1到5的數字。例如，ui-block-c類定義了一個占據3列的網格項目。 另外，如果您想讓一個網格項目跨多列或多行，可以使用ui-grid-span-*和ui-grid-row-*類。ui-grid-span-*類定義一個網格項目跨越幾個列，而ui-grid-row-*類定義一個網格項目跨越幾行。例如，ui-grid-span-3類定義了一個跨越3列的網格項目，ui-grid-row-2類定義了一個跨越2行的網格項目。 總之，網格布局是一種非常強大和靈活的布局系統，可以幫助您在不同大小的屏幕上創建漂亮而一致的頁面布局。如果您正在開發基于移動設備的Web應用程序，jQuery Mobile的網格布局是一個不可或缺的工具。