Using CSS nth child & clear both technique to create a div grid

There are many situations when developers need to create a grid of HTML elements, usually divs. The most frequent situation in WordPress is when you want to arrange your posts on a category page into a grid. Because of the variable height of each post, next row elements might not lay properly and cause the grid to break. In this tutorial we’ll show you how to lay each new grid row perfectly using CSS nth child and clear both technique.

On the left is an example of a broken grid caused by the 4th grid element stucked against the 2nd element. Unequal height of the floating grid elements caused the stucking. The grid on the right is perfectly aligned despite the unequal height of elements.

What does CSS nth child selector do?

The CSS :nth-child() selector is used to target the single n-th element inside a parent element. It’s a very useful CSS selector when you need to target elements that have no class or id. Using this selector it’s also possible to target every n-th element, for example every fourth element. Let’s make things clearer with a simple example.

Here’s a simple HTML code showing a parent <div> element containing nine child elements:

<div id="parent-element">
<p>I'm the first child.</p>
<p>I'm the second child.</p>
<p>I'm the third child.</p>
<p>I'm the fourth child.</p>
<p>I'm the fifth child.</p>
<p>I'm the sixth child.</p>
<p>I'm the seventh child.</p>
<p>I'm the eight child.</p>
<p>I'm the ninth child.</p>
</div>

Targeting specific child elements gets pretty simple once you get familiar with the CSS nth child selector:

/* Let's make the fifth paragraph red */ 

p:nth-child(5) {   color: red; }

/* Let's make every third paragraph blue ( 3,6,9... ) */ 

p:nth-child(3n) {   color: blue; }

Advanced possibilities of the CSS nth child selector

Now that you got the idea of how the CSS nth child selector works, it’s time to get fancier. The example above won’t help us creating a grid using n-th child & clear:both technique. Therefore, we need to even more specific targeting. With the CSS nth child selector we can target odd or even child elements, groups of child elements or element cycles defined by mathematic formulas. To perfectly lay down each new row in our grid we’ll use a formula :nth-child(Xn+Y) where:

• X is the cycle size defined by an integer number
• n is the counter that starts with 0 and increments by 1 each cycle
• Y is the offset value defined by an integer number

Let’s use the HTML code from the previous example and define a formula for our CSS nth child selector:

p:nth-child(3n+1) {   color: blue; }

The formula 3n+1 inside the nth child selector will make blue child elements (paragraphs) 1, 4, 7, 10… which is exactly what we need to create a three column grid. Here’s how the child elements are targeted by the formula:

• 3×0 + 1 = 1
• 3×1 + 1 = 4
• 3×2 + 1 = 7
• 3×3 + 1 = 10
• etc…

What does CSS clear:both property do?

When we have floating HTML block elements, they stick one to another from right to the left (float:left) or from left to the right (float:right). When we want to stop elements from floating, we have to use the CSS property clear:both on the first element that comes after the floating elements. The so called clearfix will position the element with the clear:both property in a new row with it’s top margin sticking to the bottom margin of the highest element floating above.

Adding a clearfix to the child element targeted with the :nth-child(Xn+Y) selector is the point of our technique to achieve the perfect alignment of HTML elements inside our grid.

How to create a div grid using n-th child & clear both technique

By properly combining the :nth-child(Xn+Y) selector with the clearfix clear:both CSS property, you can start creating grids of any kind or number of HTML elements. We’ll use again the HTML layout example showed above and arrange it into grids.

Here are all the CSS nth child variations you could possibly need:

/* 2 column grid */

p { display: block; width: 50%; float: left; }

p:nth-child(2n+1) {   clear: both; }

/* 3 column grid */

p { display: block; width: 33%; float: left; }

p:nth-child(3n+1) {   clear: both; }

/* 4 column grid */

p { display: block;  width: 25%; float: left; }

p:nth-child(4n+1) {   clear: both; }

/* 5 column grid */

p { display: block;  width: 20%; float: left; }

p:nth-child(5n+1) {   clear: both; }

/* etc... */

Firstly we set the display:block; property to all the <p> elements, since they are not block elements by default. If you’re working with block elements such as <div> , you can skip this property. Secondly, we define an even width for our grid elements and make them float left. Finally, using the :nth-child(Xn+Y) selector we target the first element of each row and disable it’s floating behaviour using the clear:both CSS property.

Pro Tip: Editing of HTML and CSS code in WordPress is much easier with highlighted syntax. If your theme editor doesn’t highlight the code by default, we suggest using a Syntax Highlighter Plugin.

To learn more about the CSS :nth-child() selector check out the w3schools nth child refference.