How to span an image or text across multiple rows and columns

Hi all,

I'm playing around with the popular 'broken grid' layout trying to recreate something like this:

  • https://dribbble.com/shots/4931341-Collectiv/attachments/1105846
  • https://dribbble.com/shots/3542562-Breaking-the-grid
  • https://dribbble.com/shots/3218219-Mountains/attachments/687687
  • However I seem to have an issue getting the text or image I want to use to span over multiple columns/rows. I tried following this guide with no success:

  • https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870
  • Does anyone maybe know how to achieve something like this from within BSS? I know I can do this with negative margins but that is not really ideal for a responsive design. Using grid-column: 1 / span 2; also did not work

    Thanks!

    The main thing to understand is that you won't be using flexbox, so you won't be using the ROW/COLUMNS.

    Flexbox uses the CSS property "display:flex" CSS Grid uses the CSS property "display:grid"

    So to do what the examples you gave do, you will have to manually built the HTML and CSS.

    I have not personally used the grid items overlapping each other, but I can understand the logic in how it's done.

    Start simple to understand how CSS Grid works then once you get that you figure out how the overlapping works.

    Good site to start with on getting to understand CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/

    This is a basic concept, I used parts of the above sites image and made a test grid with overlapping that you can try out. I'll get around to making a jsfiddle of it.

    HTML

    <div class="grid-test">
        <div class="item grid-1-1"></div>
        <div class="item grid-1-2"></div>
        <div class="item grid-1-3"></div>
        <div class="item grid-1-4"></div>
        <div class="item grid-1-5"></div>
        <div class="item grid-2-1"></div>
        <div class="item grid-2-2"></div>
        <div class="item grid-2-3"></div>
        <div class="item grid-2-4"></div>
        <div class="item grid-2-5"></div>
        <div class="item grid-3-1"></div>
        <div class="item grid-3-2"></div>
        <div class="item grid-3-3"></div>
        <div class="item grid-3-4"></div>
        <div class="item grid-3-5"></div>
        <div class="item-a"></div>
        <div class="item-b"></div>
    </div>
    
    

    CSS

    .grid-test {
      display:grid;
      grid-template-columns:40px 50px auto 50px 40px;
      grid-template-rows:25% 100px auto;
    }
    
    .grid-test .item {
      border:1px dotted;
      padding:1rem;
    }
    
    .item[class*=grid-1] {
      grid-row:1;
    }
    
    .item[class*=grid-2] {
      grid-row:2;
    }
    
    .item[class*=grid-3] {
      grid-row:3;
    }
    
    .grid-1-1 {
      grid-column:1;
    }
    
    .grid-1-2 {
      grid-column:2;
    }
    
    .grid-1-3 {
      grid-column:3;
    }
    
    .grid-1-4 {
      grid-column:4;
    }
    
    .grid-1-5 {
      grid-column:5;
    }
    
    .grid-2-1 {
      grid-column:1;
    }
    
    .grid-2-2 {
      grid-column:2;
    }
    
    .grid-2-3 {
      grid-column:3;
    }
    
    .grid-2-4 {
      grid-column:4;
    }
    
    .grid-2-5 {
      grid-column:5;
    }
    
    .grid-3-1 {
      grid-column:1;
    }
    
    .grid-3-2 {
      grid-column:2;
    }
    
    .grid-3-3 {
      grid-column:3;
    }
    
    .grid-3-4 {
      grid-column:4;
    }
    
    .grid-3-5 {
      grid-column:5;
    }
    
    .item-a {
      background-color:rgba(255,255,0,0.5);
      grid-column:2 / span 3;
      grid-row:1 / span 2;
    }
    
    .item-b {
      background-color:rgba(0,0,255,0.5);
      grid-column:1 / span 3;
      grid-row:2 / span 2;
    }
    
    

    You can see what that basic concept looks like here http://saj.bss.design/grid-overlapping.html

    Saj

    Hi Saj,

    Thank you for your help! I didn't realize I needed to use the grid display instead of the flexbox one.

    Solved!

    Good to hear, glad I could help :)

    Saj