<style>

  ul {

    position: relative;

    overflow-x: scroll;

    scroll-snap-type: x mandatory;

    resize: both;

    width: 400px;

    height: 200px;

    container-type: size;

    columns: 1;

    border: 1px solid black;

    text-align: center;

    padding: 0;

  }

  ul::column {

    scroll-snap-align: center;

  }

  li {

    list-style: none;

    display: inline-block;

    height: 100cqh;

    border: 1px solid gray;

    aspect-ratio: 2/3;

  }

</style>

<ul>

  <li>Item one</li>

  <li>Item two</li>

  <li>Item three</li>

  <li>Item four</li>

  <li>Item five</li>

  <li>Item six</li>

  <li>Item seven</li>

  <li>Item eight</li>

  <li>Item nine</li>

</ul>