Flashback Grid

January 7, 2013 9:32 pm Published by rado Leave your thoughts

The great number of Responsive Web Design grids can be confusing and intimidating to use. Percentage-based floating columns can drop down in certain resolutions and browsers. The flex box method is unfinished and currently has 3 different conflicting implementations. With a little help from the table-based past, here is the Flashback Grid, whose columns behave like table cells. Boxes never drop below each other and the browser does all width calculations, instead of forcing us to write complex percentages in CSS.

The columns are defined like this:

.column1, .column2, .column3, .column23, .column4, .column34 {
    display: table-cell;
    vertical-align: top;
    padding: 1%;
    width: 98%;
}
.column2 {
    width: 48%;
}
etc.

and are wrapped in this container:

.box-wrap {
    clear: both;
    display: table;
    table-layout: fixed;
    width: 100%;
}

Now all your content will be accessible in a bulletproof layout on desktop, tablet and phone. Browsers supported: Safari, Firefox, Chrome, Opera and Internet Explorer 8+. If you want to use a page width like 960px, put the wrapper in a .container div. Bonus: vertical align now works as expected.