Wyświetlanie responsywnej i przewijanej listy obrazków / kafelków

Hej, potrzebuję w projekcie zaimplementować wyświetlanie listy kwadratowych niewielkich obrazków, coś na zasadzie thumbnails. Niestety rozmiar listy nie będzie mi znany i jest zmienny, będzie to generyczne rozwiązane, gdzie lista będzie zassana z plików. Poza tym potrzebuję by nie zajmowała zbyt dużą część ekranu, dlatego najlepiej żeby mogła być przewijana dla różnych rozmiarów ekranu. I na koniec musi być responsywna. Docelowo chcę ją wykorzystać w projekcie Angular, ale wydaje mi się że o akurat nie robi żadnej różnicy.

Zacząłem wprowadzać własne rozwiązanie z użyciem Bootstrap Grid system, ale nie jestem do końca zadowolony z wyników, do tego jest sporo dłubania przy tym, nadpisywania własności i frustrowania się. Ciekaw jestem czy będziecie w stanie polecić mi jakąś sprawdzoną bibliotekę JSową? Ja niestety nie znam żadnej i wolę się ograniczyć w testach do polecanych przez Was, zamiast tracić więcej czasu na testowanie wszystkich wyników Google. Z góry dzięki za pomoc.

@katakrowa: Poniżej jest efekt który udało mi się uzyskać do tej pory. Przy mniejszych ekranach z użyciem @media zmieniam wielkość obrazów, z użyciem col- ich ilość w rzędzie. Niby to działa, ale jeszcze nie mam jeszcze ogarniętego przewijania, poza tym nie podoba mi się fakt, że musiałem manualnie ogarniać @media. Do tego jeszcze nie udało mi się uzyskać efektu Windowsowych kafelków, co wydaje mi się najlepszym rozwiązaniem. Bądź co bądź, ciekaw jestem czy jakaś libka oszczędzi mi czasu?

Poniżej kod:

<div class="row itemListedCollection">
              <label class="selectLabel col-12">Please select tiles:</label>
              <div class="center row">
                <div
                  *ngFor="let tile of getTiles(); let i = index"
                  class="itemListedDisplay col-lg-2 col-md-3 col-sm-4 col-4"
                >
                  <img
                    src="../../../assets/images/{{ tile.type }}/{{
                      tile.code
                    }}.jpg"
                  />
                </div>
              </div>
            </div>

.itemListedDisplay {
  margin-bottom: 20px;
}

.itemListedCollection {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.selectLabel {
  margin-bottom: 20px;
  height: 20px;
}

.center {
  margin: 0 auto;
  width: 90%;
  padding: 0px !important;
}

@media (min-width: 250px) {
  .itemListedDisplay img {
    height: 30px;
    width: 30px;
  }
}

@media (min-width: 300px) {
  .itemListedDisplay img {
    height: 40px;
    width: 40px;
  }
}

@media (min-width: 350px) {
  .itemListedDisplay img {
    height: 70px;
    width: 70px;
  }
}

@media (min-width: 450px) {
  .itemListedDisplay img {
    height: 105px;
    width: 105px;
  }
}

@media (min-width: 576px) {
  .itemListedDisplay img {
    height: 110px;
    width: 110px;
  }
}

@media (min-width: 765px) {
  .itemListedDisplay img {
    height: 115px;
    width: 115px;
  }
}

@media (min-width: 992px) {
  .itemListedDisplay img {
    height: 125px;
    width: 125px;
  }
}

@media (min-width: 1200px) {
  .itemListedDisplay img {
    height: 150px;
    width: 150px;
  }
}

bakunet napisał(a):

Bądź co bądź, ciekaw jestem czy jakaś libka oszczędzi mi czasu?

Pewnie jakaś jest co oszczędzi jednak nadal nie bardzo wiem jaki chcesz uzyskać efekt końcowy. Masz może gdzieś jakiś przykład?
Niezależnie jednak od wszystkiego jeśli to mają być tylko ustawiające się kafelki to spróbowałbym to zrobić w czystym CSS. Kiedyś to było trudne ale z CSS3 prawie wszystko jest gotowe.

Ostatecznie udało mi się ogarnąć temat bez dodatkowych bibliotek. @katakrowa , tak jak wspominałeś, to byłą kwestia kilku linii w CSS, przy użyciu overflow-x: auto; overflow-y: scroll; dodałem przewijanie, też musiałem nadpisać kilka własności Bootstrapowych dla col i row: flex-wrap: nowrap; display: inline-block; float: none;, żeby mi się kontent nie zawijał, ale mniej to bolało niż myślałem że będzie ;p Też zostawiłem litanię nieszczęsnych @media które trochę mnie kłują w oczy, ale niech już będzie.