Using HTML and CSS to create a diagonal grid layout

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.
Joined
Sep 5, 2007
Messages
2,310
First Name
Colin
The easiest way would be to create this as a large image in a photo editing programme such as Photoshop.

If you must do it in CSS then take a look at this article on css-tricks and look at the parallelogram code. You would need to creat a bounding box and then several parallelograms inside it each with an image inserted either as a background or as an image within the parallelogram element.
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
Personally, I would us the <map> and <area> elements, for your example - getting the coordinates is easy-peasy using MSPaint to open your image - the coordinates are shown at the bottom as you move your mouse over the image ;)
 
Joined
Jul 23, 2013
Messages
31
I have an idea for only CSS and HTML.
Here is the result, still needs a little work, but I'm sure it can point you in the right direction.


It would benefit from a HTML pre-processor like php, jsp or asp to generate the tedious HTML for you.

Here is an example pastebin
https://codepen.io/Bawat/pen/qJdzrZ


HTML:
<html>
<head>
</head>
  <body>
    <div class="backdrop">
      <div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
    </div>
  </body>
</html>
HTML:
:root {
    --effect-height: 250vh;
    --rotation-angle: -20deg;
    --image-gap: 10px;
 
    --images-per-column: 3;
    --columns-per-page: 7;
}

/* Controls the angle at which the images are displayed */
.backdrop{
  -ms-transform: rotate(var(--rotation-angle)); /* IE 9 */
  -webkit-transform: rotate(var(--rotation-angle)); /* Safari */
  transform: rotate(var(--rotation-angle));
}
/* Makes sure that each EVEN column is shifted down by half a picture height */
.backdrop .colum:nth-child(even) {
  position: relative; /* Needed for "top" to work */
  top: calc(var(--effect-height) / var(--images-per-column) / 2); /* /2 because we want to shif down by HALF an image height*/
}

.element{
  display: block;
  width: calc(100% - var(--image-gap) * 2);/* Set the element's width to 100% of the column it is inside. -image gap * 2 because there is a gap on both sides of the image */
  height: calc(var(--effect-height) / var(--images-per-column) - var(--image-gap) * 2);
  border-radius: 25px;
 
  background-size: 100% 100%; /* Ensures that the images stretches to fill the boundary */
  background-image: url('https://i.imgur.com/AcOQx1S.jpg');/*PLACEHOLDER IMAGE - DELETE ME LATER*/
 
  margin: var(--image-gap);
}
.colum{
  width: calc(100% / var(--columns-per-page));
  height: var(--effect-height);
  display: inline-block;
}
 
Last edited:
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
Nice post @Bawat(y)
Are you perhaps in the teaching profession? Easily understandable tutorial!
I would use bootstrap for the column divs and obviously <a> hrefs enveloping <img> tags (with img-responsive class), within each sub-division (dropping the background-image you have in the .element class), which should work nicely;)
 
Last edited:
Joined
Jul 23, 2013
Messages
31
Best of luck! Let us know if there's anything else we can help with.
I don't actually have any experience teaching.
I believe it's important to keep code easy to understand as I typically find myself returning and wishing I'd have written it for future me.
 

howard.a.s

Thread Starter
Joined
Jul 22, 2005
Messages
502
Thank everyone. I am extremely grateful for your time and effort and am experimenting with the various different ideas you have suggested.
 

howard.a.s

Thread Starter
Joined
Jul 22, 2005
Messages
502
I have an idea for only CSS and HTML.
Here is the result, still needs a little work, but I'm sure it can point you in the right direction.


It would benefit from a HTML pre-processor like php, jsp or asp to generate the tedious HTML for you.

Here is an example pastebin
https://codepen.io/Bawat/pen/qJdzrZ


HTML:
<html>
<head>
</head>
  <body>
    <div class="backdrop">
      <div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div><div class="colum">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
    </div>
  </body>
</html>
HTML:
:root {
    --effect-height: 250vh;
    --rotation-angle: -20deg;
    --image-gap: 10px;
 
    --images-per-column: 3;
    --columns-per-page: 7;
}

/* Controls the angle at which the images are displayed */
.backdrop{
  -ms-transform: rotate(var(--rotation-angle)); /* IE 9 */
  -webkit-transform: rotate(var(--rotation-angle)); /* Safari */
  transform: rotate(var(--rotation-angle));
}
/* Makes sure that each EVEN column is shifted down by half a picture height */
.backdrop .colum:nth-child(even) {
  position: relative; /* Needed for "top" to work */
  top: calc(var(--effect-height) / var(--images-per-column) / 2); /* /2 because we want to shif down by HALF an image height*/
}

.element{
  display: block;
  width: calc(100% - var(--image-gap) * 2);/* Set the element's width to 100% of the column it is inside. -image gap * 2 because there is a gap on both sides of the image */
  height: calc(var(--effect-height) / var(--images-per-column) - var(--image-gap) * 2);
  border-radius: 25px;
 
  background-size: 100% 100%; /* Ensures that the images stretches to fill the boundary */
  background-image: url('https://i.imgur.com/AcOQx1S.jpg');/*PLACEHOLDER IMAGE - DELETE ME LATER*/
 
  margin: var(--image-gap);
}
.colum{
  width: calc(100% / var(--columns-per-page));
  height: var(--effect-height);
  display: inline-block;
}

I've been playing around with this idea and it seems just like what I am looking for. Thank you so much for all of your time and effort in putting this together for me.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top