Create Automated Horizontal Scrolling Tiles with different scrolling with pure CSS

Question

I want to create news horizontal scrolling tiles slider with pure css without JS

I tried using FlexBox,

.spotlight-wrapper {
  width: 100%;
  overflow-x: auto;
}
.spotlight-wrapper .spotlight {
  list-style: none;
  height: 230px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: bottom;
  padding: 0;
}
.spotlight-wrapper .spotlight li {
  width: 220px;
  height: 220px;
  background: #ccc;
  margin: 5px;
}
.spotlight-wrapper .spotlight li.small {
  width: 105px;
  height: 105px;
}
.spotlight-wrapper .spotlight li.medium {
  width: 220px;
  height: 105px;
  /*
     * Idea to fix it, but will cause
     * issue if the medium tile in the
     * bottom level, and there are 2 small
     * tiles next to it in the top level
    */
  /* & + .small + .small{
     display: block;
     clear: both;
     justify-content: bottom;
     margin-top: 120px;
     margin-left: -110px;
    } */
}
.spotlight-wrapper .spotlight li.red {
  background: red;
}

<div class="spotlight-wrapper">
 <ul class="spotlight">
  <li>Tile #1</li>
  <li class="small">Tile #2</li>
  <li class="small">Tile #3</li>
  <li class="medium">Tile #9</li>
  <li class="medium">Tile #10</li>
  <li>Tile #2</li>
  <li class="medium red">Tile #1</li>
  <li class="small red">Tile #2</li>
  <li class="small red">Tile #3</li>
  <li>Tile #5</li>
  <li>Tile #7</li>
  <li>Tile #8</li>
  <li class="medium">Tile #9</li>
  <li class="medium">Tile #10</li>
  <li>Tile #11</li>
  <li>Tile #12</li>
  <li class="small">Tile #13</li>
  <li>Tile #14</li>
  <li>Tile #15</li>
  <li>Tile #16</li>
  <li>Tile #17</li>
  <li>Tile #18</li>
  <li>Tile #19</li>
  <li>Tile #20</li>
 </ul>

But if you check the red tiles, its not aligned the correct way, i can fix it using margins (check the commented block) but will cause other issue if the wide tile is in the bottom row, and there are 2 small tiles in the next block,

Also if there are only one small tile, empty space will be created.

Answer 1

For starters, I work a lot with flexbox and I very much like what you are trying to achieve and will modify a few things of my own to work like that.

Secondly, you have failed to tell flexbox how to flex the li elements. Defining only width and height on flexed elements forces flexbox to use only those values and is not flexible at all.

UPDATE

A flexbox row cannot put different sized boxes on top of each other on the same row (the same is true for flexbox columns with rows). This actually means that if you want your solution you will need a main column with 2 rows (ul) each height: 105px and put li in either row where appropriate.

Another option would be a single flexbox row (ul) with child li's that are wrapping flexbox rows, actually nesting small and medium classes.

I think I would opt for the second solution.

As you can see from the code, your main 'lightstrip' has become a row of boxes with each box containing 3 elements: 2 spot's and a 'strip'.

I removed the reference to ul and li elements, making it more flexible. This way you can use any kind of container as a lightbox.

ul,ol,li { list-style: none; padding: 0; margin: 0 }

.armature {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.lightstrip {
  height: 210px;
  display: flex;
  flex-flow: column wrap;
  padding: 0;
}

.lightbox {
  width:  210px;
  height: 210px;
  
  display: flex;
  flex-flow: row wrap;
}

.spot {
    flex: 1 1 100px;
    height: 100px;
    margin: 2px;
    background-color: rgba(0,255,0,.3);
}
.strip {
    flex: 1 1 200px;
    height: 100px;
    margin: 2px;
    background-color: rgba(255,0,0,.3);
}

<div class="armature">
    <div class="lightstrip">
        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="strip"></div><div class="spot"></div><div class="spot" ></div></div>

        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>
        <ul class="lightbox"><li class="strip"></li><li class="spot"></li><li class="spot" ></li></ul>
        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>

        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="strip"></div><div class="spot"></div><div class="spot" ></div></div>

        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>
        <ul class="lightbox"><li class="strip"></li><li class="spot"></li><li class="spot" ></li></ul>
        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>
    </div>
</div>