Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.

Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. For example, the children of the Grid can position themselves with Grid Lines such that they overlap and layer similar to positioned elements.

In addition, the absence of content structure in the Grid helps to manage changes to layout by using fluid and source order independent lay out techniques. By combining media queries with the CSS properties that control layout of the Grid and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, without needing to alter the semantic nature of their content.

Choosing Grid

To set up some element to use Grid style layout you set the display style attribute to a value of -ms-grid;

Setting Up Rows/Columns

This is very much like XAML in that we define a set of rows/columns and we define the dimensions for them as either;

  • auto – i.e. size to the content in the row/column (this is auto in XAML)
  • a size unit – i.e. 96px or 2em or whatever (this is the same in XAML)
  • fr units – i.e. a fraction of the remaining vertical/horizontal space ( this is * in XAML )
  • min-content – i.e. size to the the minimum width/height of elements in the row/column
  • max-content – i.e. size to the maximum width/height of elements in the row/column

What’s nice about all of this being defined in CSS is that the HTML content is left completely clean and devoid of anything related to layout. I’m not sure whether you could set the RowDefinitions and ColumnDefinitions of a XAML Grid via a style

Handling Alignment

It’s also possible to decide how to align content within row/column if that content doesn’t fill or overflow the row/column via;

ms-grid-row-align and -ms-grid-column-align

which can be center, end, start and stretch which nicely gets around how this works in XAML where you had different enum values for vertical/horizontal alignment.

It’s possible to have an element span more than one row or column via -ms-grid-column-span and -ms-grid-row-span and you can have more than one element in a single cell although it’s more sophisicated than the XAML world because there’s a specific -ms-grid-layer where -ve values are stacked to the back and +ve values to the front and 0 is the default.

Here’s a screenshot:

Read Mike Taulty’s BlogLaying out HTML with CSS Grids for more…

Related Links


Share your thoughts

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s