PROWAREtech
CSS: Horizontally Scrolling Cards with a Snap-to Feature
Create cards with a horizontal scroll and a snap-to feature.
This example is an HTML page with a number of cards that scroll horizontally and have a snap-to function. See code for comments.
Related: Format Images with Varying Aspect Ratios to a Common Aspect Ratio and Customize Scrollbars on Chrome/Edge and Firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Create Cards with a Horizontal Scroll and a Snap-to Feature</title>
<style>
body {
background-color: dimgray;
color: lightgray;
}
.cards { /* NOTE: this selects the container for the cards */
overscroll-behavior-inline: contain; /* NOTE: this means the when someone scrolls to the end then it will not scroll the whole page, too */
scroll-snap-type: inline mandatory; /* NOTE: this will make the first visible card snap */
display: grid; /* NOTE: use grid, not flex */
grid-auto-flow: column;
grid-auto-columns: 13%; /* NOTE: use an odd percentage */
overflow-x: auto;
}
.cards > div { /* NOTE: this selects the card */
scroll-snap-align: start; /* NOTE: this works in conjunction with "scroll-snap-type: inline mandatory;" from above */
scroll-padding-inline: 5px; /* NOTE: this optionally adds some padding but it is already present because of the "margin: 5px;" below */
border-radius: 7px;
margin: 5px; /* NOTE: this adds some spacing to the cards */
padding: 5px;
background-color: white;
color: dimgray;
overflow: hidden;
border: 2px solid black;
}
.cards > div > img {
inline-size: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* NOTE: style the scrollbar (CHROME/EDGE only) */
.cards::-webkit-scrollbar {
height: 15px;
}
.cards::-webkit-scrollbar-track {
background-color: black;
margin-block: 5px;
border-radius: 100vmax;
}
.cards::-webkit-scrollbar-thumb {
background-color: white;
border: 3px solid black;
border-radius: 100vmax;
}
.cards::-webkit-scrollbar-thumb:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<div class="cards">
<div> <!-- NOTE: each DIV inside of the "cards" class is one card -->
<img src="https://picsum.photos/id/237/157/88" /> <!-- NOTE: all of these cards use differently sized images -->
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
</div>
<h1>Suscipit Amet</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, molestias expedita sunt eius tenetur laborum non nemo cupiditate veritatis alias facere totam, autem qui nobis, eligendi deleniti commodi. Consequatur minima, enim beatae, aliquid architecto autem dignissimos deserunt, non labore laboriosam odio. Laboriosam, doloribus ex dignissimos voluptas illo dolorum necessitatibus iusto nulla quae adipisci. Fugit asperiores aperiam maiores quos excepturi, accusamus neque, quaerat, nam at pariatur cum doloremque vero mollitia ipsam praesentium. Suscipit dolorem recusandae cupiditate autem nam rerum quia architecto iusto esse maiores veniam sed labore earum aut possimus tenetur, inventore tempora dicta illum alias odit eligendi ea libero. Maxime dolorem sunt nam, quibusdam itaque adipisci ipsum voluptatibus aspernatur veritatis corrupti ut expedita eos est quas suscipit voluptates quasi temporibus harum assumenda! Sequi quia nihil doloribus non excepturi eius esse tempore quaerat quae, veritatis facilis, iure dolores veniam similique atque ipsa velit perspiciatis illo voluptatibus quisquam suscipit temporibus voluptates provident illum? Numquam unde atque aut, reprehenderit error minima quasi dolores, natus, dolor accusamus commodi libero eum ullam repellendus. Esse non provident iusto optio sequi voluptate officia eos inventore vitae aspernatur dolore nam placeat consectetur commodi, fugit id deleniti molestias voluptas eligendi dicta accusamus. Autem, hic dignissimos quos modi cupiditate beatae!</p>
</body>
</html>
Comment
