Today I want to show you a really neat CSS grid style, called the diamond grid. I saw a tutorial for this first on 1stwebdesigner by Sam Norton. While I followed his tutorial, I noticed that he’s using an unordered list to achieve this, so I wanted to try to convert it to using basic divs. Since, these are blocks of content not a list of something.
I also changed the CSS to make it dynamic. Meaning that you can add as many boxes to the grid, all of them will be positioned correctly, creating a nice layout. Below you can see the final product.
[tutorial_details]
To get started, we need to create a container that will hold out grid, then add a few boxes. Should look like the following.
<div class="container clear"> <div class="box"> <div class="text"> Your Text Here </div> </div> <div class="box"> <div class="text"> Your Text Here </div> </div> <div class="box"> <div class="text"> Your Text Here </div> </div> <div class="box"> <div class="text"> Your Text Here </div> </div> <div class="box"> <div class="text"> Your Text Here </div> </div> <!-- you can add as many of these blocks as you want --> </div>
Now that we have our HTML structure, we can start adding some CSS. First, we’ll define a width for our container, and position it in the middle, with a 100px margin from the top.
.container {
width: 1160px;
margin: 100px auto;
}
Then, we can set the width and height for our boxes, make them float to left, with display:inline-block. We use inline-block, so they are nicely positioned near each other and we can add margins and paddings to them.
Also, we need to rotate them by 45deg to make them look like, well diamonds.
.box {
height: 200px;
width: 200px;
float: left;
display: inline-block;
overflow: hidden;
margin-left: 41px;
margin-right: 40px;
margin-top: 43px;
border: 4px solid #fff;
background: transparent;
text-decoration: none;
color: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Now that we rotate the boxes, the text also rotated… and we don’t want the content of the boxes to be rotated. That’s why we have an other div inside of the boxes, called “.text” so we can rotate them back. With -45deg
.text {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
text-transform: uppercase;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
At this point, all we have left, is to adjust the margin of the 2nd, 4th etc rows. We do this by using the nth-child() css selector.
We select the 5th box, and then we increment that by 7, so we select the 12th one, then 19th etc etc. And we add a left margin of 186px, this is so the borders of the boxes overlap making it into a smooth grid. We also need to move every 5th box upwords by64px, so they fill the gaps between the row above.
.container > div:nth-child(7n+5) {
margin-left: 186px;
}
.container > div:nth-child(n+5) {
margin-top: -64px;
}
And finally, we create a simple clear floats class, so the elements we place under the grid container won’t go under our grid but stay under it as they should. :
.clear::after {
content: '';
display: table;
clear: both;
}
And we’re done.
In case you want to change the size of the boxes, you’ll have to recalculate the margins on the boxes, as well as on the nth-childs otherwise they’ll overlap or have huge gaps between them.