CSS Diamond grid

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows.

Here is a live demo of the grid:

A better explanation of how it works can be found on the aforementioned hexagonal grid post. The only differences are as follows:

  • Each grid item is rotated 45 degrees using the CSS transform property
  • Since each item is rotated, an addition inner div has been added to each item with a rotation of -45 degrees, negating the rotation so it appears normal
  • Some small tweaks to the margins so the items are packed more tightly

You can view the HTML and CSS on the following CodePen:

View on CodePen

Posted toCSS CSS3 Experiments HTML User Interface Web Design