What is a grid scroller?

Grid scrollers are grids that allow for an infinite number of items with side scrolling. They look like this:

• You can add a title

• You can add text in them like this.

• You can add clickable videos

• You can put text in them like this and then change the background colour.

• You can also add text and then a button.

  This is a button

• And you can put that button at the bottom of the grid item.

  Hi I'm down here now

• You can add clickable photos

How do I build a grid scroller?

Start with opening up your grid using the class grid-scroller applied to a <ul>. Then add your items inside as individual <li> elements. It's better to do that using really simple content such as 'item 1', 'item 2', 'item 3' so that you can get the layout right before complicating it with images, videos, and other text. That will look something like this:

<ul class="grid-scroller">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Each item will have a paper background colour by default. You can change this by applying different background colours to override it. You can also add images, videos, and any other content you want. Here is some code for the examples above: