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.
Responsive Column Layouts
Posted on