Pure CSS grid layout using nth-child

MarketPress, my e-Commerce plugin of choice for WordPress, has network functionality allowing you to run a multi-site shopping network. And as awesome and full-featured as it is, it currently doesn’t have an easy way to generate a grid layout of network products. So I figured I could tackle that myself.

After poring over the multi-site code (marketpress-includes/marketpress-ms.php for those interested). I realized, it’d actually be easiest if I could use just CSS to generate a grid. That way, users wouldn’t need to download an extra plugin and utilize extra resources on their site.

While a CSS grid layout is rather easy (using float:left), I couldn’t figure out a way to have the floats cleared after every row in the grid, which was needed to keep the rows from getting jumbled in the display. Then I realized, CSS3’s nth-child selector would let me clear the floats at specified intervals.

After a bit of testing, I found the nth-child solution works very nicely, with the only drawback being that it doesn’t work in most of IE (Internet Exterminator, or something like that). But who really uses IE (I know, I know, only the people who most need everything to look right)? However, it actually looks okay with IE.

Here’s the respective Gist for the MarketPress global grid layout:

Pure CSS grid layout using nth-child

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s