Simple grid layout for a mobile app?

0
votes

I am an experienced desktop developer (MFC->Win Forms->WPF, some GTK) trying to play with HTML5/mobile development.

All I want is to have is an app that has a header, a footer, and a 2x2 grid in the middle. Two rows of the grid should be of equal height, left column should be 2/3 screen wide, right column 1/3 screen wide. The app should be full screen on mobile and work inside a window on desktop. It should re-apply the layout when window size/orientation changes.

In WPF/Silverlight that would go along the lines of (sorry for the ugly syntax):

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="2*" />
       <ColumnDefinition Width="1*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
       <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <my:Header Grid.Row="0" Grid.Column="0" Grid.ColSpan="2" />
   <my:Footer Grid.Row="2" Grid.Column="0" Grid.ColSpan="2" />
   <my:Section11 Grid.Row="1" Grid.Column="0" />
   <my:Section12 Grid.Row="1" Grid.Column="1" />
   <my:Section21 Grid.Row="2" Grid.Column="0" />
   <my:Section22 Grid.Row="2" Grid.Column="1" />
</Grid>

Is there some kind of JavaScript/CSS/whatever library that would support things like that? I looked at JQuery.Mobile, and Foundation, and some other things, but they all seem to have issue with 100% height. E.g. see here: JQuery-Mobile content area 100% height between head and foot.

Sorry if it is trivial/obvious. A pointer to a working example would be greatly appreciated.

1
javascripthtmlmobile
Define 'mobile'? 2/3 of 320 pixels (the base width of your entry-level smartphone) and 2/3 of 780 pixels (entry-level tablet) are vastly different. And that's just two examples; it gets worse with retina displays... - Tieson T.
Good point. However, my main focus is on the grid layout. Once you have the basic grid layout in your disposal, you can refine it, e.g. make it 2/3 height if orientation is vertical, etc. - Ivan Krivyakov

1 Answers