Grids

Nachdem wir gelernt haben, wie wir den Header und Footer samt Navigationselementen erstellen können, geht es darum, den Hauptbereich der Applikation zu erstellen.

Allgemein bietet es sich bei mobilen Seiten oder Apps nicht an, mehrspaltige Layouts zu verwenden. Der Grund dafür sind die zu kleinen Displays von Smartphones. (Bei Tablet-PCs wie dem iPad spricht im Normalfall nichts gegen mehrspaltige Layouts.)

Aufgrund des begrenzten Platzes auf Smartphone-Displays, wird bei mobilen Anwendungen oft mit so genanntem "collapsible content" gearbeitet. Das sind Menüs bzw. Menüpunkte, die erst nach dem anklicken sichtbar werden, indem sie nach unten "aufklappen".

Für unser Spiel gelten diese allgemein gültigen Regeln im Hinblick auf mehrspaltige Layouts nicht. 
Wir möchten ein gitternetzartiges Spielfeld erstellen, auf dem nach und nach neue Maulwurfhügel erscheinen.

Um ein solches Layout mit mehreren Zeilen und Spalten zu erstellen, arbeitet man am besten mit dem Attribut ui-grid.

Mit diesem Attribut, lassen sich Layouts mit bis zu fünf Spalten und einer beliebigen Anzahl an Zeilen erstellen.

Das folgende Beispiel zeigt ein Layout mit zwei Spalten und einer Zeile:

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

Weitere Infos und anschauliche Beispiele findest du wie immer in der Dokumentation von jQuery Mobile:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html