How I Built a Smooth Horizontal Scrolling List with Only a Few Lines of CSS

I created a smooth horizontal scrolling list for a mobile web application and all it took was only a few lines of CSS!

Photo by freestocks on Unsplash

Horizontal lists are used more and more in mobile web applications each day and as web designers and web developers, we are responsible to deliver a smooth experience to the users. In this article, you’re going to learn how easy it is to create horizontal lists using CSS.

Okay, let’s do it!

First, prepare your HTML markup. You can use any type of elements that you prefer. In this example, I will be using unordered lists to create my HTML markup.

<ul>
  <li>
    <div class="card">...</div>
  </li>
  <li>
    <div class="card">...</div>
  </li>
  <li>
    <div class="card">...</div>
  </li>
  <li>
    <div class="card">...</div>
  </li>
  <li>
    <div class="card">...</div>
  </li>
</ul>

The next thing I’m gonna do is add basic styles to the list.

ul {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 1rem 0;
  overflow-x: scroll;
  padding: 0 0 0 1rem;
}
ul li {
  padding: 0 1rem 0 0;
}