get ready for css grid 3 - boxy w/ margins instead of gutters

In this example below you will see how to do a get ready for css grid 3 - boxy w/ margins instead of gutters with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by etuan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright etuan ©
  • HTML
  • CSS
  • JavaScript
    <main>
      <header><h1>It is M1ll3r Time!</h1></header>
      <section class="grid">
        <img src="http://c1.staticflickr.com/8/7239/13418977584_fa1cf3f009_b.jpg"/>      
        <img src="http://c1.staticflickr.com/8/7309/16503496126_b021994bef_k.jpg"/>
        <img src="http://c1.staticflickr.com/9/8581/16268611292_0f82738c4e_k.jpg"/>
        <img src="http://c1.staticflickr.com/8/7518/15431601544_4a15b8d094_b.jpg"/>
        <img src="http://c1.staticflickr.com/9/8678/16163791508_4817c40ee7_b.jpg"/>
        <img src="http://c1.staticflickr.com/8/7559/15687183335_e81b576f02_b.jpg"/>
        <img src="http://c1.staticflickr.com/3/2813/13684089674_8837fca20c_b.jpg"/>
        <img src="http://c1.staticflickr.com/8/7386/13525267803_52aac3537b_b.jpg"/>
      </section>
      <footer>Footer</footer>
    </main>

/*Downloaded from https://www.codeseek.co/etuan/get-ready-for-css-grid-3-boxy-with-margins-instead-of-gutters-PWQJoW */
    body, html {
  height: 100%;
  font-family: 'open sans';
  background-color: #3e3e3e;
}

header, footer {
  text-align: center;
}
footer {
  padding: 2rem 0;
}

img { 
  object-fit: cover;  
  margin-bottom: calc(.5rem - 4px);
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
}


@media all and (min-width: 500px) {
    
  img {
    max-width: calc(100% - .5rem);
    max-height: calc(100% - .5rem);
    width: auto;
    margin: 0 .5rem .5rem 0;
  }
  
  .grid {
    margin: 0 auto;
    width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-columns: 50% / 50%;
    // grid-template-rows: 25% / 33% / 17% / 25%;
  }
  
  img {
    grid-row: auto / span 1;
  }

  img:nth-of-type(1),
  img:nth-of-type(4),  
  img:nth-of-type(5) {      
    grid-column: 1 / span 1;
  }

  img:nth-of-type(2),
  img:nth-of-type(7),
  img:nth-of-type(8) {
    grid-column: 2 / span 1;    
  }

  img:nth-of-type(3),
  img:nth-of-type(6) {
    grid-column: 1 / span 2;     
  }
  
  img:nth-of-type(7) {
    grid-row: 3 / span 1;
  }
  img:nth-of-type(5),
  img:nth-of-type(8) {
    grid-row: 5 / span 1;
  }

  img:nth-of-type(2),
  img:nth-of-type(3),
  img:nth-of-type(6),
  img:nth-of-type(7),
  img:nth-of-type(8) {
    margin-right: 0;
    max-width: 100%;
    // this is stupid... but oh well. mabye the gutters will be worth it.
  }

  @media all and (min-width: 768px) {
    .no-gutter {
      margin-right: 0;
      max-width: 100%;
      // this is stupid... but oh well. mabye there's a reason for  gutters after all.
      }
    .reset {
      grid-row: auto;
      margin: 0 .5rem .5rem 0;
      max-width: calc(100% - .5rem);
      // this is even stupider from here to jupiter.
    }
    
    .grid {      
      grid-template-columns: 33% / auto / 25%;
      // grid-template-rows: 25% / 33% / 17% / 25%;
    }
    
    img:nth-of-type(1) {
      @extend .reset;      
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
    }

    img:nth-of-type(2) {
      @extend .reset;
      grid-column: 2 / span 1;
      grid-row: 1 / span 1;
    }

    img:nth-of-type(3) {
      @extend .reset;
      grid-column: 1 / span 2;
      grid-row: 2 / span 1;        
    }

    img:nth-of-type(4) {
      grid-column: 3 / span 1;
      grid-row: 1 / span 2;
      @extend .no-gutter;
    }
    
    img:nth-of-type(5) {
      @extend .reset;
      grid-column: 2 / span 1;
      grid-row: 4 / span 1;        
    }
    
    img:nth-of-type(7) {
      @extend .reset;
      grid-column: 1 / span 1;
      grid-row: 3 / span 2;
    }

    img:nth-of-type(6) {
      grid-column: 2 / span 2;
      grid-row: 3 / span 1;     
      @extend .no-gutter;   
    }

    img:nth-of-type(8) {
      grid-column: 3 / span 1;
      grid-row: 4 / span 1;
      @extend .no-gutter;
    }

  }
  
  @media all and (min-width: 960px) {

    .grid {      
      grid-template-columns: 25% / 25% / 25% / 25%;
      // grid-template-rows: 25% / 33% / 17% / 25%;
    }
    
    img:nth-of-type(1) {      
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
    }

    img:nth-of-type(2) {
      grid-column: 2 / span 1;
      grid-row: 1 / span 1;
      margin: 0 .5rem .5rem 0;
      max-width: calc(100% - .5rem);
    }

    img:nth-of-type(3) {
      grid-column: 1 / span 2;
      grid-row: 2 / span 1;
      margin: 0 .5rem .5rem 0;
      max-width: calc(100% - .5rem);
    }

    img:nth-of-type(4) {
      grid-column: 3 / span 1;
      grid-row: 1 / span 2;
      margin: 0 .5rem .5rem 0;
      max-width: calc(100% - .5rem);
    }
    
    img:nth-of-type(5) {
      grid-column: 4 / span 1;
      grid-row: 1 / span 1;
      margin-right: 0;
      max-width: 100%;
    }
    
    img:nth-of-type(7) {
      grid-column: 1 / span 2;
      grid-row: 3 / span 2;
      margin: 0 .5rem .5rem 0;
      max-width: calc(100% - .5rem);

    }

    img:nth-of-type(6) {
      grid-column: 3 / span 2;
      grid-row: 3 / span 2;     
    }

    img:nth-of-type(8) {
      grid-column: 4 / span 1;
      grid-row: 2 / span 1;
    }
  }
  
  
}


/*Downloaded from https://www.codeseek.co/etuan/get-ready-for-css-grid-3-boxy-with-margins-instead-of-gutters-PWQJoW */
    

Comments