Responsive Grid Layout

Foreword

Ayqy Home uses a 24-column 960 grid implemented with faux absolute positioning. I've found that faux absolute positioning and grid layouts are a perfect match, offering excellent flexibility, adaptability, and ease of use. I continued using the 960 grid for my blog, but needed to support mobile reading. Naturally, I thought of media queries and found it remarkably easy to remove the grid (thanks to the benefits of faux absolute positioning).

1. Faux Absolute Positioning

Faux absolute positioning emerged because both absolute and float positioning have various drawbacks when used for grid layouts.

Drawbacks of absolute positioning grids:

• Height cannot adapt automatically

With position: absolute;, elements are removed from the normal document flow. The browser no longer calculates their height during rendering, causing the parent element to collapse (height cannot adapt).

• Infeasible for dynamic layouts

If non-absolutely positioned elements exist, they are difficult to position because it's impossible to determine if there is content at a specific (left, top) point.

Drawbacks of float positioning grids:

• Fragile

The width, margin, padding, or border of any single element affects the entire page layout. If a width is exceeded by even 1px, elements at the end of a row are pushed down, breaking all subsequent rows. The meticulously assembled pixel-perfect layout shatters completely.

Faux absolute positioning solves these problems and is extremely effective for grid layouts. The principle is simple:

1. Fix the width of the top-level container

   .body {
       overflow: hidden;   /* Makes auxiliary positioning sub-containers invisible */
       width: 950px;       /* Fixed width */
   }
   

2. Float sub-containers outside the top-level container, at the right edge

   .container {
       float: left;         /* Float */
       position: relative;  /* Prepare for the third step */
       width: 100%;         /* Provides a negative margin reference for content */
       left: 100%;          /* Move out */
   }
   

3. Use negative margins on the sub-container content to move it back into the top-level container area

   /* 2 columns 100 : 850 */
   .content1 {
       margin-left: -950px;    /* Move back into the top-level container area */
       width: 100px;
   }
   .content2 {
       margin-left: -850px;    /* Move back into the top-level container area */
       width: 850px;
   }
   

The content of the sub-containers can prop up the invisible sub-containers on the right. Consequently, all secondary containers can prop up the top-level container, making the height adaptive. Positioning depends on negative margins rather than float positioning, thus avoiding the problem where one change affects the entire layout.

2. Media Query

Implementing a responsive layout with media queries requires solving two problems first:

1. Media Query Conditions

Do we need to write separate media queries for the widths of mobile phones, tablets, and PCs? It doesn't have to be that complicated. For example, a 960 grid displays correctly on devices wider than 960px but fails on narrower ones. We only need to write one additional set of styles (max-width: 959px). Note that this refers to device physical pixels. A more compatible approach is as follows:

1. Declare the width as the physical pixel width in HTML

   <meta name="viewport" content="width=device-width, initial-scale=1" />
   

2. Declare the width as the physical pixel width in CSS

   /* IE10+ */
   @-ms-viewport {
       width: device-width;
   }
   /* W3C Standard */
   @viewport {
       width: device-width;
   }
   

3. Media Query

   /* <=959 */
   @media screen and (max-width: 959px) {
   /*...*/
   }
   

2. Removing the Grid

Styles for small-screen devices need to override the established grid. Ideally, a useful reset would reset all styles that need overriding. While that is impossible, removing a grid implemented with faux absolute positioning is quite easy:

/* Top-level container */
.body {
    overflow: visible;
    width: auto;
}
/* Sub-container */
.container {
    float: nonr;
    position: static;
    width: auto;
    left: auto;
}
/* Content */
.content {
    margin-left: 0;
    width: auto;
}

Restoring these items to their default values removes the grid. This is a significant advantage (the thought of the workload required to remove an absolute positioning grid is daunting).

3. Bootstrap Grid

Bootstrap also provides a responsive grid, supporting the following features:

• Device differentiation (col-xs, col-sm, col-md, col-lg)

• Column offsets

• Nested columns (a feature of grid layouts themselves)

• Column ordering (changing the display order relative to the HTML declaration order)

Bootstrap does not use a faux absolute positioning grid; it uses a percentage-based layout.

References

• http://960.gs/: Ten thousand grid layouts

• Bootstrap Grid System

• Faux Absolute Positioning: Original version

• Faux Absolute Positioning (Translated): Chinese version, recommended