1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Using HTML and CSS to create a diagonal grid layout

Discussion in 'Web Design & Development' started by howard.a.s, Sep 23, 2018.

Advertisement
  1. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    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

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

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,203
    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.
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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 ;)
     
  4. Bawat

    Bawat

    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.
    [​IMG]

    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

    [​IMG]
    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: Oct 1, 2018
    JiminSA likes this.
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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: Oct 5, 2018
  6. Bawat

    Bawat

    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.
     
  7. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    Thank everyone. I am extremely grateful for your time and effort and am experimenting with the various different ideas you have suggested.
     
  8. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476

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

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 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1216943

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice