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:
Leave a Reply
You must be logged in to post a comment.