Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.
The Inconvenience of Using The First & Last Classes
Normally we would add a .first or .last class to clear the margin space and float in the grid. Adding the first and last class is very tedious, not to mention that it gets more complicate if you need to make it responsive.
The :nth-of-type(An+B) expression makes it very easy to clear the float and margin without having to add .first or .last class. For example:
.grid4 .col:nth-of-type(4n+1)= target every 4th .col element, starting from the first
.grid3 .col:nth-of-type(3n+1)= target every 3rd .col element, starting from the first
.grid2 .col:nth-of-type(2n+1)= select every 2th .col element, starting from the first
Both media queries and nth-of-type are not supported by Internet Explorer 8 or older. You can use selectivizr.js to provide nth-of-type support for IE and respond.js for media queries. Unfortunately, selectivizr.js and respond.js don’t work well together (ie. nth-of-type doesn’t work within the media queries). This means the only fall back with this responsive grid is that the columns can not be switched from 4-column to 3-column or 2-column.