swipe-grid.html

<style>
  .grid {
	display: grid;
    grid-template-columns: repeat(auto-fit,minmax(0,1fr));
    grid-template-rows: repeat(auto-fit, minmax(0,1fr));
	height: 80vh;
    max-height: 80vh;
}
 .snap-container::-webkit-scrollbar {
  display: none;
}
  
  .snap-container {
	scroll-snap-type: both mandatory;
}
  
  .snap-y {
	overflow: scroll !important;  
}
  .snap-x {
	overflow: scroll !important;  
}
  img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    scroll-snap-align: center;
}
  .flex {
	display: flex;
}
  .col-1 {
  	grid-column-start: 1;
  }
  
    .col-2 {
  	grid-column-start: 2;
  }
  
    .col-3 {
  	grid-column-start: 3;
  }
    .col-4 {
  	grid-column-start: 4;
  }
  
  .row-1 {
	grid-row-start: 1;
}
  .row-2 {
    grid-row-start: 2;
  }
  
  .span-1 {
	grid-row-end: span 1;
}
  .span-2 {
	grid-row-end: span 2;
}
  .text-box {
	min-width: 100%;
    min-height: 100%;
    display: flex;
    scroll-snap-align:center;
    box-sizing: border-box;
    place-items: center;
    justify-content: center;
    border: 4px solid lightblue;
}
</style>

<div class="grid">
  <div class="snap-container snap-y col-1 row-1 span-2">
    <div class="text-box">
          <h2>
            Third Wave Coffee
          </h2>
        </div>
    <img src="https://source.unsplash.com/random/?coffee"> 
    <img src="https://source.unsplash.com/random/?coffee,latte">
  </div>
    <div class="snap-container snap-x flex col-2 row-1 span-1">
             <div class="text-box">
          <h2>
            Espresso
          </h2>
        </div>
    <img src="https://source.unsplash.com/random/?coffeehouse,coffee">
        <img src="https://source.unsplash.com/random/?coffeehouse,coffee">  
    <img src="https://source.unsplash.com/random/?coffee,coffeeshop,espresso">
  </div>
      <div class="snap-container snap-x flex col-3 row-1 span-1">
               <div class="text-box">
          <h2>
            Pour Over Coffee
          </h2>
        </div>
    <img src="https://source.unsplash.com/random/?latte,coffee"> 
    <img src="https://source.unsplash.com/random/?coffee,coffeehouse,latte">
    <img src="https://source.unsplash.com/random/?coffee,latte,coffeehouse">    
  </div>
      <div class="snap-container snap-x flex col-2 row-2 span-1">
               <div class="text-box">
          <h2>
           French Press
          </h2>
        </div>
    <img src="https://source.unsplash.com/random/?latte,espresso">
            	<div class="text-box">
          <h2>
            Cold Brew Coffee
          </h2>
        </div>
        <img src="https://source.unsplash.com/random/?coffee,coffeehouse,latte">
    <img src="https://source.unsplash.com/random/?espresso,coffee">
  </div>
      <div class="snap-container snap-x flex col-3 row-2 span-1">
    	<div class="text-box">
          <h2>
            Cold Brew Coffee
          </h2>
        </div>
    <img src="https://source.unsplash.com/random/?espresso">
        
        <img src="https://source.unsplash.com/random/?coffeehouse"> 
    <img src="https://source.unsplash.com/random/?coffee,espresso">
  </div>
      <div class="snap-container snap-y col-4 row-1 span-2">
               <div class="text-box">
          <h2>
            Our Coffee
          </h2>
        </div>
    <img src="https://source.unsplash.com/random/?coffeehouse"> 
           <img src="https://source.unsplash.com/random/?latte,espresso">
    <img src="https://source.unsplash.com/random/?coffee,espresso,latte">
  </div>

</div>