WinRT comparison JS/Html and C#/XAML: Using a grid for app layout

The grid in Html (window store app)

In XAML we often use the Grid element to create a fluid layout but at the same time keep the controls where we want them to be in relation to each other. Of course we don’t use just the grid, but it often serves as a main frame- or skeleton, for the app. If you look at the default templates, the grid adheres to the main margin guidelines for the top, tile and left margin.

What is the Html way of creating a fluid main layout in Windows Store Apps in JavaScript and Html?
You actually still use a Grid element. It’s not the same as in XAML, it’s actually a vendor specific implementation of the CSS Grid Layout specification, and Internet Explorer is (as far as I know) the first browser to offer that to the developers. As of writing it is still under development, but is stable and used (and recommended) for Windows Store Apps written in JavaScript and Html.
The grid allows you to define an invisible grid on an element (for example a div) and create columns and rows. The columns and rows can have fixed sizes, adopt the size of its children or take up a fraction of the available space (the same way we do it with XAML Grid). Together with media queries this gives us the perfect fluid and responsive design and feel to an app – when used correctly of course. Read about the –ms-grid here

To set a grid to a div for example you use (in CSS)
display: -ms-grid

Then you define up the columns and rows

#mainItem {
display: -ms-grid;
height:300px;
width: 400px;
-ms-grid-columns: 50px 1fr 2fr;
-ms-grid-rows: 1fr 100px auto;
}

In this example you have 3 columns and two rows. To add items to those rows you create new elements in the markup as children to the element containing the grid, and set which columns and rows they should be in. You can set alignment, span, and more.

#mainItem {
display: -ms-grid;
height:300px;
width: 400px;
-ms-grid-columns: 50px 1fr 2fr;
-ms-grid-rows: 1fr 100px auto;
}

#subItem {
-ms-grid-row: 1;
-ms-grid-column: 1;
background-color:yellow;
}
#subItem2 {
-ms-grid-row: 2;
-ms-grid-column: 1;
background-color:red;
}
(The –ms- prefix is to imply its vendor specific)

In XAML it is actually very similar, the only thing you need to remember is that the columns and rows are 0-indexed, so the first column is 0 and not one, second one is 1 not 2 and so on. Also keep in mind that if no column or row is set, the child item will default to the first column and row. The same goes for the –ms-grid, but since it’s not that easy to see whether or not the child element has a parent with a grid in the CSS I would recommend setting all the rows and columns to 1 to indicate that.

Here are two examples showing the –ms-grid in Html and CSS and the exact same layout in XAML.

The grid in Html (window store app)

The grid in xaml (window store app)

HTML

[sourcecode language=“html”]

CSS

[sourcecode language=“css”]
#mainItem {
display: -ms-grid;
height:300px;
width: 400px;
-ms-grid-columns: 50px 1fr 2fr;
-ms-grid-rows: 1fr 100px auto;
}

#subItem {
-ms-grid-row: 1;
-ms-grid-column: 1;
background-color:yellow;
}
#subItem2 {
-ms-grid-row: 2;
-ms-grid-column: 1;
background-color:red;
}

#subItem3 {
-ms-grid-row: 1;
-ms-grid-column: 2;
background-color:orange;
-ms-grid-column-span: 2;
-ms-grid-row-span: 3
}
#subItem4 {
-ms-grid-row: 1;
-ms-grid-column: 3;
background-color:green;
}
#subItem5 {
-ms-grid-row: 2;
-ms-grid-column: 3;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
background-color:white;
height: 50px;
width:50px;
}
[/sourcecode]

XAML

[sourcecode language=“XML”]

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>
<Grid.RowDefinitions>

</Grid.RowDefinitions>

[/sourcecode]

WinRT comparison JS/Html and C#/XAML: Using a grid for app layout

Comments