How to create an adaptive layout with CSS Grid

03/03/2016

9 minutes to read

In this article

It goes without saying that web developers have a lot of choices when it comes to laying out their webpages. Ensuring your layout can adapt to different devices, orientations, and screen sizes an important consideration as you decide which methods to use. Grid layout is a new layout method that enables you to divide space for major regions of a webpage based on either a fixed amount, the available space within the browser window, or a combination of both.

Because Grid layout enables you to align elements into columns and rows but has no content structure, it also enables scenarios—like the one described in this article—that are either not possible or are very difficult to achieve with HTML or Cascading Style Sheets (CSS) tables. Plus, by using Grid layout in conjunction with media queries, you can enable your layout to seamlessly adapt to changes in device form factor, orientation, available space, and more.

The CSS Grid Layout specification is currently a World Wide Web Consortium (W3C) Working Draft and is partially supported in Internet Explorer 10 in the vendor-prefixed form. For a full list of supported properties, see Grid Layout on MSDN. Because the Grid Layout specification is still in development, support in Internet Explorer 10 might not correspond exactly to that laid out in the specification.

Here we guide you through the creation of a simple light box page for viewing photos in a photo gallery. We use Grid layout to organize the page's content, and media queries to optimize the layout for viewing in either a portrait or landscape orientation. In a portrait layout, the height of the browser window is greater than its width; in a landscape orientation, the width of the browser window is greater than its height.

This topic has the following sections:

Designing the page

Constructing the Grid

Structuring the page

Creating the Grid element and specifying rows and columns

About fractional units

Assigning page elements to columns and rows

Aligning Grid items

Using Grid with media queries

Creating element overlap with Grid

Conclusion

Related topics

Designing the page

We want this light box page to take up the entire screen in Internet Explorer in the new Windows UI environment, with no scrolling. Of course, this page should also be equally useable in Internet Explorer for the desktop, and should fit nicely into that browser's chrome as well.

The following sketch approximates how we want our light box page to look when in a landscape orientation. We've chosen to sketch this assuming the browser takes up a full widescreen display with a 16:9 aspect ratio.

In this sketch, A is a small area intended for a logo, B is intended for a photo caption or description, C is the main photo viewing area, and D is for thumbnails of the other photos in the collection.

Because the light box page is intended to be viewed full screen, we'll have to account for different screen sizes. The focus of the page is the large photograph. Therefore, when the screen size increases, let's make the photograph panel (C) expand. But we should also prevent panel A from expanding at all, prevent panel B from expanding horizontally, and prevent panel D from expanding vertically.

Constructing the Grid

This scenario is an ideal use for Grid layout. To help construct the Grid, we'll add dotted lines to complete the Grid lines that aren't already visible. To achieve the margins between page elements and prevent the design from looking too crowded, we'll add some gutters. Gutters can simply be extra columns and rows of a fixed width or height.

In this image, the purple dotted line represents the Grid element, or Grid layout container. The red dotted lines represent the Grid lines.

This Grid has a total of five rows and three columns:

The gutters are the second and fourth rows and the second column

The first and last rows have fixed heights to account for the fixed height of panels A and D

The third row's height is variable, so that the layout will scale to any screen

The first column has a fixed width, to account for the fixed width of panels A and B

The last column's width is variable, so that the layout will scale to any screen

Structuring the page

Let's start marking up the Grid. To begin, we write a simple bit of HTML to get a basic page structure. Notice that the order of the sections is not necessarily what you would expect them to be given our sketch, but that's one of the benefits of Grid: you can reorder elements from Document Object Model (DOM) order however you want.

Creating the Grid element and specifying rows and columns

Now, create the Grid element and specify the rows and columns.

The first thing to do is to add the display element and set it to -ms-grid. This creates the Grid element.

In the Grid element, we use the -ms-grid-columns property to specify the width of each column in a space-delimited list. Likewise, we use the -ms-grid-rows property to specify the height of each column in a space-delimited list.

About fractional units

To enable the Grid to size itself according to the space available to it, we use fractional units (fr). The size of a fractional unit depends on both the total available space and the total number of fractional units specified. In our light box example page, we use just one fractional unit, but more complex layouts are also possible. For instance, consider a case where four columns are specified with lengths of auto, 100 pixels, 1 fractional unit, and 2 fractional units. The columns will appear as follows:

Column 1 (auto keyword): Column is fitted to the content in the column.

Column 2 ("100px"): Column is 100 pixels wide.

Column 3 ("1fr"): Column takes up one fraction unit of the remaining space.

Column 4 ("2fr"): Column takes up two fraction units of the remaining space.

Because there are three total fraction units in this grid, Column 3 is allotted 1 fraction unit divided by 3 fraction units—or 1/3—of the remaining space. Column 4 is allotted 2/3 of the remaining space.

The -ms-grid-row and -ms-grid-column properties, when applied to a page element, specify the Grid cell where the page element begins. In left-to-right, top-to-bottom languages, the -ms-grid-row property specifies the uppermost row that the element is to occupy. Similarly, you specify the leftmost column that the element is to occupy with the -ms-grid-column property.

Be aware that if you attempt to span past the number of defined columns or rows in the Grid, another column or row is implicitly created and its width or height is set to auto (fit to content) for every column or row beyond the defined number.

View the page with these selectors added as well as some styling of other page elements.

Aligning Grid items

The page looks good, but ideally the photo would be centered in its panel. To accomplish this, we'll use the -ms-grid-row-align and -ms-grid-column-align properties. These properties define how to align an item within a row or column, respectively. In our case, we'll set both of these properties to center on the ID selector for "big_pic":

Now, you can view the finished page. If you don't have a device you can turn to view the page in a portrait orientation, open the page in Internet Explorer for the desktop and resize it so that its width is less than its height.

Creating element overlap with Grid

CSS Grid opens up many more possibilities for page layout. For instance, Grid enables you to easily create content overlays, which, when combined with the opacity property, can create, for instance, translucent bands of text over an image. For more information and to see Grid overlays in action, see CSS Grid overlay sample in the Internet Explorer Samples Gallery.

Conclusion

You should now have an idea of the possibilities of Grid layout, and how to use the Grid properties with media queries. To learn more, see the links in the following section.