Bagaimana cara membuat horizontal scroll grid menggunakan CSS Inline Block ?

Sebagai front end developer, horizontal scroll sangat umum digunakan pada website di browser smartphone. Hal ini dari sisi ux mengurangi scroll panjang ke bawah. Konsep yang akan dibuat seperti contoh gambar dibawah :

Cara Membuat Horizontal Scroll Grid di CSS

CSS yang digunakan sepert ini :

/* HORIZONTAL SCROLL */
.scroll-container{
    overflow: auto;
    white-space: nowrap;
}

.grid{
    width:120px;
    height:120px;
    background-color:#09aadf;
    border-radius:7px;
    display:inline-block;
    margin-right:10px;
}

Simple bukan, semoga bermanfaat. sebenernya masih banyak teknik css yang bisa digunakan selain ini, bisa menggunakan display grid dan sebagainya.

Lihat juga cara membuat horizontal scroll menggunakan CSS Flex.