MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

}
-ms-grid-columns: 120px 2fr 80px 1fr 80px 2fr 80px 2fr 80px 2fr 80px;
With just these styles we can already see the hub page taking shape in Blend by zooming out in the
artboard:
Now let’s create the individual sections, each one starting as a div that we add in
pages/home/home.html:
and style them into their appropriate grid cells with 100% width and height. I’m showing hubSection1
here as the others are the same with just a different column number (4, 6, 8, and 10, respectively):
.homepage .hubSection1 {
-ms-grid-row: 1;
-ms-grid-column: 2; /* 4 for hubSection2, 6 for hubSection3, etc. */
width: 100%;
height: 100%;
}
All of this is implemented in the HubPage example included with this chapter.
Laying Out the Sections
Now we can look at the contents of each section. Depending on what you want to display and how you
want those sections to interact, you can again just use layout (CSS grids or perhaps flexbox) or use a
control like ListView. hubSection3 and hubSection5 have gaps at the end, so they might be ListView
controls with variable items. Note that if we created lists with more than 9 or 6 items, respectively, we’d
want to adjust the column size in the overall grid and make the section element width larger, but let’s
assume the design calls for a maximum of 9 and 6 items in those sections.
239