Flashback Grid

January 7, 2013 9:32 pm Published by 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.

Download theĀ Flashback Grid and party like it’s 1999.

Categorised in:

This post was written by rado

Leave a Reply

Your email address will not be published. Required fields are marked *