CSS Grid with section animation

CSS Grid with section animation

by Danielle Parkinson

HTML

<div class="panel">
  <div class="info-section"></div>
  <div class="image-section perspective two">
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
  </div>
</div>

<div class="panel">
  <div class="info-section"></div>
  <div class="image-section perspective three">
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
  </div>
</div>

<div class="panel">
  <div class="info-section"></div>
  <div class="image-section perspective four">
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
  </div>
</div>

<div class="panel">
  <div class="info-section"></div>
  <div class="image-section default-layout two">
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
  </div>
</div>

<div class="panel">
  <div class="info-section"></div>
  <div class="image-section default-layout three">
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
  </div>
</div>

<div class="panel">
  <div class="info-section"></div>
  <div class="image-section default-layout four">
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
    <div class="project">
      <div class="test"></div>
    </div>
  </div>
</div>

<div class="panel">
  <div...

SASS

//MIXINS
@mixin default-layout-grid-templates($columns: auto, $rows: auto, $gap: 0)
  grid-template-columns: repeat($columns, 1fr)
  grid-template-rows: repeat($rows, 1fr) /*UPDATED*/
  grid-gap: $gap

@keyframes image-keyframes
  from
    opacity: 0
    
  to
    opacity: 1

@mixin animation-mixin($delay: 0)
  animation: image-keyframes ease-in 4s
  animation-fill-mode: forwards
  animation-delay: $delay
  
.panel
  display: flex
  flex-direction: row //set to column for mobile
  align-items: center
  width: 100%
  min-height: 300px
  margin-bottom: 30px

  .info-section 
    flex: 1
    
  .image-section
    flex: 1
    display: grid
    grid-auto-rows: minmax(100px, 200px)
    border: 2px solid
    
    .project        
      opacity: 0
      
      .test
        min-width: 300px //set as applicable
        height: 200px
        background: grey
      
    @for $n from 1 through 8
      .project:nth-of-type(#{$n})
        @include animation-mixin(#{$n * 0.25}s)

    &.default-layout
      @include default-layout-grid-templates
      
      .project .test
        min-width: 0
        //height: auto   
      
      &.two /**Updated**/
        @include default-layout-grid-templates ($columns: 5, $rows: 3) /*UPDATED*/
        
        .project
          grid-column: 1 / span 3
          grid-row: 1 / span 2 /*UPDATED*/
          
          &:nth-child(2)
            grid-column: 3 / span 3
            grid-row: 2 / span 2 /*UPDATED*/

      &.three
        @include default-layout-grid-templates ($columns: 4, $rows: 3, $gap: 10px)
        
        .project
          grid-row: 1 / span 2 /*UPDATED*/
          
          &:nth-child(1)
            grid-column: 1 / span 2 /*UPDATED*/
          
          &:nth-child(2)
            grid-column: 3 / span 2 /*UPDATED*/
          
          &:nth-child(3)
            grid-column: 2 / span 2 /*UPDATED*/
            grid-row: 2 / span 2 /*UPDATED*/

      &.four
        @include default-layout-grid-templates ($columns: 2,...