Responsive Grid Layout.css

event.css

.dashboard-event-tile {
  display: grid;
  
  // small screen
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 4.375rem 1fr;
  
  // medium screen
  @media screen and (min-width: 45rem) {
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 7.5rem 1fr 1fr;
  }

  // large screen
  @media screen and (min-width: 75rem) {
    grid-template-rows: 1fr auto;
    grid-template-columns: 7.5rem 1fr 35%;
  }
  
  .image {
    // small screen
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    
    // medium screen
    @media screen and (min-width: 45rem) {
      grid-row: 1 / 3;
      grid-column: 1 / 2;
    }

    // large screen
    @media screen and (min-width: 75rem) {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
  }
  
  .content {
    // small screen
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    
    // medium screen
    @media screen and (min-width: 45rem) {
      grid-row: 1 / 2;
      grid-column: 2 / 4;
    }

    // large screen
    @media screen and (min-width: 75rem) {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
    }
  }
  
  .meta {
    // small screen
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    
    // medium screen
    @media screen and (min-width: 45rem) {
      grid-row: 2 / 3;
      grid-column: 2 / 4;
    }

    // large screen
    @media screen and (min-width: 75rem) {
      grid-row: 1 / 2;
      grid-column: 3 / 4;
    }
  }
}