- var i = 1;
- var count = 50
// Flex CSS only
h2 Flex CSS
  br/
  small relocate: 
    code 6n+2, 6n+3 & 6n+6
.scroll-x
  .cards-flex-3c2r
    while i < count
      .card
        a(href='#card' + i)= i++

// Flex CSS 
// with Bootstrap modifiers
-var i = 1;
h2 Flex CSS with Bootstrap modifiers
  br/
  small relocate: 
    code 6n+2, 6n+3 & 6n+6
.scroll-x
  .flex-bs
    while i < count
      if i === 1 || i % 6 === 0 || i % 6 === 1
        .card.col-md-8= i++
      else
        .card.col-md-4= i++

// Grid CSS
// with card modifier classes
-var i = 1;
h2 Grid CSS with card modifiers
  br/
  small relocate: 
    code .double:nth-child(even)
.scroll-x
  .grid
    while i < count
      if i === 1 || i % 6 === 0 || i % 6 === 1
        .card.double= i++
      else
        .card.single= i++
View Compiled
$card-spacer: 16px; //1rem
$card-height: 210px;
$card-height-large: 484px;
$card-width: 330px;
$card-width-large: 352px;
$card-width-large-double: $card-width-large * 2 + $card-spacer;
$breakpoint-sm: 576;
$breakpoint-md: 768;

// @see: https://stackoverflow.com/questions/49998738/horizontal-scroll-for-css-grid-layout
/* Titles */
h2 {text-align: center; margin-top: 1rem;}

/* Horizontal Scrolling Container */
.scroll-x {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 80vw;
  margin: 1rem auto 0;
  > * {
    // background-color: lightgreen;
  }
}

/* Card Base Style */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: #fff;
  background-color: #9a9a9a;
  border-radius: 0;
  // first (double)
  &:nth-child(6n+1) {background: plum}
  // last (double)
  &:nth-child(6n+6) {background: tomato}
  // 2nd & 3rd (single)
  &:nth-child(6n+2), 
  &:nth-child(6n+3) {background: orange}
  // 4th & 5th (single)
  &:nth-child(6n+4), 
  &:nth-child(6n+5) {background: teal}
  
  a {color: #fff}
}

/**
 * Flex Cards Container
 */
.cards-flex-3c2r {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  
  // Cards
  .card {
    position: relative;
    flex: 1 0 $card-width;
    height: $card-height;
    margin-right: $card-spacer;
    @media (max-width: #{$breakpoint-md - 1}px) {
      &:nth-child(even) {
        margin-top: $card-height + $card-spacer;
        margin-left: -#{$card-width + $card-spacer}; ;
      } 
    }
    @media (min-width: #{$breakpoint-md}px) {
      flex-basis: $card-width-large;
      height: $card-height-large;
      // large 1st & 6th
      // increase flex-basis (width) 
      &:nth-child(6n + 1),
      &:nth-child(6n + 6) {
        flex-basis: $card-width-large-double;
      }
      // push down onto second row
      // large (1st & 6th) & small (2nd & 3rd) 
      &:nth-child(6n + 2),
      &:nth-child(6n + 3),
      &:nth-child(6n + 6) {
        margin-top: $card-height-large + $card-spacer;
      }
      // pull left by the width of the large cards (+ spacing)
      // large (6th) & small (2nd) 
      &:nth-child(6n + 2),
      &:nth-child(6n + 6) {
        margin-left: -#{$card-width-large-double + $card-spacer};
      }
    }
  }
}

/**
 * Flex Card Container - using BS card modifiers
 */
.flex-bs {
  padding: 1rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  .card {
    height: $card-height;
    flex: 1 0 100%;
    @media (max-width: 767px) {
      &:nth-child(even) {
        margin-top: $card-height;
        margin-left: -100%;
      } 
    }
    @media (min-width: 768px) {
      &:nth-child(6n + 2),
      &:nth-child(6n + 3),
      &:nth-child(6n + 6) {
        margin-top: $card-height;
      }
      &:nth-child(6n + 2),
      &:nth-child(6n + 6) {
        margin-left: -66.666%;
      }  
    }
  }
}

/**
 * Grid
 */
// .grid {
//   display: grid;
//   width: auto;
//   grid-template-columns: repeat(8, auto-fit);
//   grid-template-columns: repeat(4, 50%);
//   grid-template-rows: repeat(2, 50%);
//   grid-gap: 5px;
//   grid-auto-columns: 50%;
//   grid-auto-columns: auto;
//   grid-auto-columns: 200px;
//   grid-auto-flow: column;
// }

$grid-gap: $card-spacer;
.grid {
  display: grid;
  grid-auto-columns: $card-width; // base card width
  grid-auto-flow: column;
  grid-gap: $grid-gap;
  margin-bottom: 3rem; // just for dev
  
  @media (max-width: #{$breakpoint-md - 1}px) {
    grid-template-rows: repeat(2, 50%);
    
    // Card Base Size 
    .card {
      width: $card-width;
      height: $card-height;
    }
  }

  .card {
    @media (min-width: #{$breakpoint-md - 1}px) {      
      width: $card-width-large;
      height: $card-height-large;
      
      &:nth-child(6n+2),
      &:nth-child(6n+3) {
        grid-area: repeat 2 / span 1;
        
      }

      &:nth-child(6n+4),
      &:nth-child(6n+5) {
        grid-area: repeat 1 / span 1;
      }

      &.double:nth-child(odd) {
        grid-area: repeat 1 / span 2; width: 100%;
        // grid-area: repeat 1 / span 1; width: calc(200% + #{$grid-gap});
      }

      &.double:nth-child(even) {
        // ideal solution - but 6n's will not align as intended
        // grid-area: repeat 2 / span 2; width: 100%;
        // working solution - uses negative margin, translateX and width: calc()
        grid-area: repeat 2 / span 1; margin-left: -#{$card-width}; width: calc(200% + #{$grid-gap}); transform: translateX(-#{$grid-gap});
      }
    }
  }
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.