Grid Expanding Experiment

In this example below you will see how to do a Grid Expanding Experiment with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ajrdesign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ajrdesign ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

/*Downloaded from https://www.codeseek.co/ajrdesign/grid-expanding-experiment-jzQQqG */
    .container {
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  .item {
    width: 100%;
    height: 200px;
    background: grey;
    transform: scale(1);
  }
  .item.full {
    grid-column: 1 / -1;
    height: 400px;
    transition: all 1s;
  }
}


/*Downloaded from https://www.codeseek.co/ajrdesign/grid-expanding-experiment-jzQQqG */
    $( ".item" ).click(function() {
  $( this ).toggleClass( "full" );
});

Comments