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.

View Demo Responsive Column/Grid

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.

first and last class

Using nth-of-type

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
clear posts

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

Making it Responsive With Media Queries

To make it responsive and fluid, use percentage value instead of pixel value.


/* col */
.col {
	background: #eee;
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
}

/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

Changing From 4-column to 3-Column

To change the 4-column to 3-column on viewport width that is less than 740px:

  1. change the .grid4 .col width to 31.2% (one-third width)
  2. reset the left margin and clear property
  3. then re-apply the left margin and clear property using nth-of-type(3n+1) to form a 3-column grid
responsive columns

@media screen and (max-width: 740px) {
	.grid4 .col {
		width: 31.2%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

Changing 4-column and 3-column to 2-column

To switch the 4-column and 3-column to 2-column on viewport width that is less than 600px: basically use the same trick as above to reset the .col width and float.


@media screen and (max-width: 600px) {
	/* change grid4 to 2-column */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

Making all columns Fullwidth (see demo)

To make all columns to full width on viewport width that is less than 400px: set width to 100% and reset the margin and float.


@media screen and (max-width: 400px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

Internet Explorer Issues

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.

33 Comments

1 2
  1. Laura K. Chik
    May 3, 2013 @ 5:28 pm

    As always another good tip! I have followed your site for years now and appreciate your skills! Thanks for helping this designer learn new tricks!

    Reply

  2. Ceba
    May 10, 2013 @ 1:29 pm

    Pretty awesome, you can also use inline-block; for reflowing grids rather than floats.

    Reply

  3. Afzal
    May 26, 2013 @ 2:12 am

    This article is really very helpful in making ur website more effective .
    In block lines is a great trick . It gives a nice texture to ur blog

    Reply

  4. Madhav
    Jun 7, 2013 @ 12:51 pm

    It’s great! Really useful resources . Thanks

    Reply

  5. Gareth Nunns
    Jun 8, 2013 @ 5:54 pm

    I loved this article and have used it in a few projects. I found myself wanting to edit it, like change the number of columns, have some padding, and change the margin in between them but it got rather tedious working out the sizes of the columns so I made this quick tool to work them out: thhttp://cdpn.io/LuKcgb
    Hope it helps

    Reply

  6. Mass Web Solutions
    Jun 11, 2013 @ 12:47 am

    The most obvious way a responsive design changes is in its layout.

    Reply

  7. Jérôme Coupé
    Nov 27, 2012 @ 3:56 am

    Alternatively, you can use use inline-block; for reflowing grids rather than floats: see demo here

    Reply

  8. Nick La
    Nov 27, 2012 @ 2:31 pm

    Agree. Inline-block seems to work better. The only issue is that the parent wrapper has to be font-size:0; to remove the whitespace and you have to set absolute font size on the column containers.

    Reply

  9. Nate
    Jun 8, 2013 @ 2:31 pm

    I don’t understand the comments about it being a space character. There’s no space character in the code that I can see.

    Reply

1 2

Leave a Reply