# Using HTML and CSS to create a diagonal grid layout



## howard.a.s (Jul 22, 2005)

Please can anyone suggest how I might go about using HTML/CSS to create something similar to the layout in this link http://www.themetaldetective.co.uk/development/01.png
http://www.themetaldetective.co.uk/development/01.png
Ideally I'd like to create a diagonal grid with a good many cells into each of which I can insert a different image.

Any constructive advice and information gratefully received.


----------



## colinsp (Sep 5, 2007)

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.


----------



## JiminSA (Dec 15, 2011)

Personally, I would us the _* and 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


----------



## Bawat (Jul 23, 2013)

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










```

```


```
: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;
}
```


----------



## JiminSA (Dec 15, 2011)

Nice post @Bawat
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


----------



## Bawat (Jul 23, 2013)

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 (Jul 22, 2005)

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 (Jul 22, 2005)

Bawat said:


> 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.
> 
> 
> ...


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.


----------

