2 Methods to Construct a Scrolling Card UI (Flexbox and CSS Grid)

We’ll create this in two alternative ways so that you simply get understanding of assorted CSS properties. You should utilize this UI sample in several elements of your websites, for instance:

• To current staff members
• To point out featured or newest posts/merchandise
• To checklist testimonials

As with every new CSS options, you would possibly see inconsistencies relying on the browser you utilize to test the demos. For instance, Chrome will present our customized scrollbar, whereas Firefox will nonetheless present the default scrollbar. Hold this in thoughts, and you should definitely test caniuse.com for the browser help of assorted front-end options.

Our Scrolling Card UI

Examine the primary model of our completed part that makes use of flexbox for the grid structure:

And this is the second model of our completed part that makes use of CSS Grid for the grid structure:

Strive scrolling each in order that half a card is seen on the edge—see how the scrolling habits robotically snaps the playing cards into place!

1. Decide the Format

Let’s kick issues off by discussing the undertaking necessities.

We have to create an adaptive scrollable card structure. The variety of playing cards that may seem in view will change relying on the viewport measurement.

Right here’s a useful desk the place we register how our structure (grid) ought to behave on totally different screens:

To visualise issues, on further small screens, the structure will appear to be this:

 On small screens, it can appear to be this:

 On medium screens, it can have this look:

Lastly, on massive screens, it can look as follows:

We additionally must lock (snap) the seen playing cards in place, every time a person has completed scrolling. This manner we’ll at all times have an actual variety of playing cards in view and we’ll keep away from seeing simply part of different playing cards; the scroll place will instantly shift to the place to begin of the closest card. This bounce will produce an impact the place every set of seen playing cards will behave a bit like carousel slides.

This impact will probably be much more apparent on cell screens the place solely a single card seems, and as you swipe, the adjoining card slides in.

To raised perceive what I’m describing, take into account the next video, and even higher, test the demos with varied display screen sizes:

2. Outline the HTML Markup

We’ll use a fairly simple construction for this: a container aspect with a heading and a listing of playing cards inside it. Every card will include a title, content material, and hyperlink. We’ll wrap these parts round some further divs to make sure that the hyperlink button will at all times sit on the backside of the cardboard.

Here is the markup:

<div class="container">
  <h2>...</h2>
  <ul class="playing cards">
    <li class="card">
      <div>
        <h3 class="card-title">...</h3>
        <div class="card-content">...</div>
      </div>
      <div class="card-link-wrapper">
        <a href="" class="card-link">...</a>
      </div>
    </li>
   <!-- extra playing cards right here -->
  </ul>
</div>

3. Specify the Primary Types

To construct the specified structure and particularly the grid, we will use totally different structure strategies. We’ll begin with a flexbox strategy after which proceed with a CSS Grid one.

All playing cards will stay inside a container that may have a 1400px width.

Flexbox Card UI

The important thing issues in regards to the card wrapper:

• It is going to be a flex container.
• It is going to have overflow-x: scroll, as we need to scroll horizontally to take a look at all playing cards.
• We’ll want a customized scrollbar that may match our model colours, assuming our model’s major shade is darkish purple.

The important thing issues about every card:

• It is going to be a flex container with flex-direction set to column. Because of this the flex gadgets will probably be stacked vertically alongside the primary axis.
• As mentioned earlier, the hyperlink button ought to at all times be on the backside independently from the title and content material lengths of every card. So to realize this uniformity, we’ll give mum or dad hyperlink wrapper margin-top: auto.
• We’ll give it flex-shrink: 0 as we don’t need to shrink and use the flex-basis property to set its width. The flex-grow property doesn’t curiosity us, so we’ll maintain the default 0 worth. The width will rely upon the display screen measurement and margin between the adjoining playing cards. Let’s clarify.

On further small screens, all playing cards may have a width equal to the mum or dad width.

To calculate the cardboard width on small screens, we’ll do these calculations:

• Complete area between seen playing cards = 1 * 20px => 20px. We omit the area from the final card.
• The width of every card = calc(50% – 10px). The worth 10px derived by calculating: Complete area between seen playing cards / Variety of seen playing cards (20px / 2 => 10px).

To calculate the cardboard width on medium screens, we’ll do these calculations:

• Complete area between seen playing cards = 2 * 30px => 60px. We omit the area from the final card.
• The width of every card = calc(calc(100% / 3) – 20px). The worth 20px derived by calculating: Complete area between seen playing cards / Variety of seen playing cards (60px / 3 => 20px).

To calculate the cardboard width on massive screens, we’ll do these calculations:

• Complete area between seen playing cards = 3 * 40px => 120px. We omit the area from the final card.
• The width of every card = calc(25% – 30px). The worth 30px derived by calculating: Complete area between seen playing cards / Variety of seen playing cards (120px / 4 => 30px).

To lock the viewport at sure parts after scrolling has completed, we’ll use the CSS Scroll Snap function. That mentioned:

• The cardboard wrapper will obtain the scroll-snap-type: x necessary property worth. This ensures that the browser will snap to a snap level as quickly as person scrolling finishes.
• Every card will obtain the scroll-snap-align: begin property worth. This determines the a part of the cardboard at which the scrolling ought to cease. Attempt to give it one other worth like heart to see the distinction.

Strive additionally scrolling with out these two properties enabled to see the distinction.

Listed below are an important types:

/*CUSTOM VARIABLES HERE*/

.playing cards {
  show: flex;
  overflow-x: scroll;
  scroll-snap-type: x necessary;
}

.card {
  show: flex;
  flex-direction: column;
  flex: 0 0 100%;
  scroll-snap-align: begin;
}

.card .card-link-wrapper {
  margin-top: auto;
}

.playing cards::-webkit-scrollbar {
  peak: 12px;
}

.playing cards::-webkit-scrollbar-thumb,
.playing cards::-webkit-scrollbar-track {
  border-radius: 92px;
}

.playing cards::-webkit-scrollbar-thumb {
  background: var(--darkred);
}

.playing cards::-webkit-scrollbar-track {
  background: var(--thumb);
}

@media (min-width: 500px) {
  .card {
    flex-basis: calc(50% - 10px);
  }

  .card:not(:last-child) {
    margin-right: 20px;
  }
}

@media (min-width: 700px) {
  .card {
    flex-basis: calc(calc(100% / 3) - 20px);
  }

  .card:not(:last-child) {
    margin-right: 30px;
  }
}

@media (min-width: 1100px) {
  .card {
    flex-basis: calc(25% - 30px);
  }

  .card:not(:last-child) {
    margin-right: 40px;
  }
}

And the associated CodePen demo the place you’ll be able to study all of the types:

CSS Grid Card UI

On this second strategy we’ll create the identical card structure, however with CSS Grid.

Listed below are the modifications we’ll apply:

• The cardboard wrapper will probably be a grid container.
• We’ll place all grid gadgets as columns because of the grid-auto-flow: column property worth.
• We’ll use the grid-auto-columns property to set the dimensions for the columns. The column measurement will rely upon the display screen measurement and the hole between every column. The calculations are precisely the identical as we did beforehand with the flex-basis property. So, the values of the grid-auto-columns property will match the values of the aforementioned flex-basis property at any display screen measurement. 

Listed below are the modified types:

/*CUSTOM VARIABLES HERE*/

.playing cards {
  show: grid;
  grid-auto-columns: 100%;
  grid-column-gap: 10px;
  grid-auto-flow: column;
}

@media (min-width: 500px) {
  .playing cards {
    grid-auto-columns: calc(50% - 10px);
    grid-column-gap: 20px;
  }
}

@media (min-width: 700px) {
  .playing cards {
    grid-auto-columns: calc(calc(100% / 3) - 20px);
    grid-column-gap: 30px;
  }
}

@media (min-width: 1100px) {
  .playing cards {
    grid-auto-columns: calc(25% - 30px);
    grid-column-gap: 40px;
  }
}

And once more, the associated CodePen demo the place you’ll be able to study all of the types:

Conclusion

On this tutorial, we examined two methods of constructing a horizontal scrolling card UI. Alongside the way in which, we went by way of varied fashionable CSS options. It will have given you some new information and has hopefully impressed you to create UI layouts that reap the benefits of a few of the stuff we lined right here.

In the event you can consider one other solution to construct this structure, don’t neglect to share it with us! As at all times, thanks quite a bit for studying!

Flexbox Tutorials on Tuts+

Flexbox is a notoriously tough a part of CSS, however don’t fear, we’ve you lined!