Css horizontal scroll cards

.row{
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.card {
  /*float: left;*/
  max-width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
  flex-basis: 33.333%;
  flex-grow: 0;
  flex-shrink: 0;
}

.card > img {
  margin-bottom: .75rem;
  width: 100%;
}

.card-text {
  font-size: 85%;
}

<div class="container">
  <div class="row">
    <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
     <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
     <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
</div>

Source: stackoverflow.com

Similar codes

0 vote204 views1 answer
Fill and no repeat background image css
CSS
0 vote216 views1 answer
Bast css 3d images gallery code
CSS
0 vote176 views1 answer
Remove all input style'ing
CSS
-1 vote179 views1 answer
Flex wrap tailwind
CSS
3 votes237 views2 answers
How to get rid of underline for links in css
CSS
0 vote185 views1 answer
Vertical sliders css
CSS
2 votes201 views2 answers
Vertical align span tailwindscss
CSS
0 vote210 views1 answer
Ion-split-pane width
CSS
-1 vote196 views1 answer
Hwo to use flexbox to make a nav bar
CSS
-2 votes211 views1 answer
Difference between numpy array and matrix
CSS