CSS Only Diamond Grid Layout

Author: AnjelaMikhaylova
Views Total: 2,416 views
Official Page: Go to website
Last Update: September 20, 2019
License: MIT


CSS Only Diamond Grid Layout


A pure CSS diamond grid layout which transforms the blocks into diamonds using CSS3 rotate transform.

How to use it:

Create a list of items for the diamond grid.

  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>

The core CSS to transform the list items.

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  width: 600px;
  height: 150px;
ul li {
  list-style: none;
  position: absolute;
  width: 200px;
  height: 200px;
  background: #000;
  margin: -100px;
  transform: rotate(45deg);
  transition: .5s;
  overflow: hidden;
  opacity: .5;
ul li:hover {
  opacity: 1;

Reposition each list item.

ul li.item1{
  top: 0;
  left: 0;
ul li.item2{
  bottom: 0;
  left: 25%;
ul li.item3 {
  top: 0;
  left: 50%;
ul li.item4 {
  bottom: 0;
  left: 75%;
ul li.item5 {
  top: 0;
  left: 100%;


See also  Checking for Substrings in Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *