Creating horizontal scrolling panels
When I say horizontal scrolling panel, hopefully you know the kind of thing I mean.
Horizontal scrolling panels are common on the iOS App Store and Google Play Store for showing panels of related content (movies, albums, and more). Where there is enough horizontal space, all of the items are viewable. However, when space is limited (think mobile devices), the panel is scrollable from side to side.
We made a horizontal scrolling panel together in example_05-10 from Chapter 5, Layout with CSS Grid. That will be the start for the finished example_15-03, which we are going to move toward in the next sections. It was already perfectly functional, but there are some new, scrolling-related, treats we can add with CSS that will really elevate the experience of using it.
Our horizontal slider looks like this on an iPhone 13 mini, running iOS 15.5:
Figure 15.3: A horizontal scrolling panel
The markup pattern looks like this; note...
