Lista określonych kontenerów w rzędzie

Hej, chciałbym zrobić coś takiego jak na załączonym obrazku - z backendu przesyłam posortowane dane, ktore chce umiescic w takich maksymalnie 3 kontenerach w rzędzie, każdy kontener to obrazek + niewielki opis. Pisze front w reactjs, jest może jakis komponent do tego? Znalazłem niby to: https://mui.com/material-ui/react-grid2/ ale jesli dobrze rozumiem przyklady to nie da sie zrobic takiego dynamicznego grida, tylko trzeba wczesniej go zdefiniować. Czy czeka mnie niestety porządna nauka html + css? xD

Flexbox oraz szerokość jednego obrazka na 33% szerokości.

Plus, to o czym mówisz będzie wyglądać dobrze tylko na dużej rozdzielczości, na małej dobrze byłoby zrobić dwa w rzędzie albo w ogóle jeden.

Dzieki ;) A jak taka responsywnosc osiagnac? Podrzucisz jakies slowa kluczowe, ktore sobie poszukac? :D

Skoq napisał(a):

Dzieki ;) A jak taka responsywnosc osiagnac? Podrzucisz jakies slowa kluczowe, ktore sobie poszukac? :D

Jeśli to byłaby biblioteka jak tailwind, to wyglądałoby to jakoś tak:

<div class="flex">
  <img class="w-full sm:w-1/2 md:w-1/3"/>
  <img class="w-full sm:w-1/2 md:w-1/3"/>
  <img class="w-full sm:w-1/2 md:w-1/3"/>
  <img class="w-full sm:w-1/2 md:w-1/3"/>
  <img class="w-full sm:w-1/2 md:w-1/3"/>
</div>

W Bootstrapie pewnie też się jakoś da.

Jeśli nie, to musiałbyś napisać media query, coś w stylu:

<style>
div.images img {
  width: 100%;
}

@media screen and (min-width: 900px) {
  div.images img {
    width: 50%;
  }
}

@media screen and (min-width: 1300px) {
  div.images img {
    width: 33%;
  }
}
</style>

<div class="images">
  <img />
  <img />
  <img />
  <img />
</div>

Zauważ podejście mobile-first, czyli domyślna szerokość to jest width: 100% - pod telefony, i potem dodatkowe query które zmieniają szerokość pod większe rozdzielczości.

dzieki, przyjrzę się temu ;)

Z tego co mi się wydaję, to nie musisz kombinować z 33%,
Po prostu robisz flexowy kontener, wrzucasz tam 3 divy (z ta sama cssowa klasa), ustawiasz odpowiedni flex-direction, dodajesz gap i masz.
Potem stylujesz sobie odpowiednio tę klasę

Productionserver napisał(a):

Z tego co mi się wydaję, to nie musisz kombinować z 33%,
Po prostu robisz flexowy kontener, wrzucasz tam 3 divy (z ta sama cssowa klasa), ustawiasz odpowiedni flex-direction, dodajesz gap i masz.
Potem stylujesz sobie odpowiednio tę klasę

A wrap?

Widać że gość chce mieć więcej niż jeden rząd tych obrazków?

@Skoq: no chyba że chcesz faktycznie mieć jeden rząd, to nie musisz. Ale tak czy tak, musisz jakoś obsłużyć jak pokazać obrazki na mobilce, w ten czy inny sposób.

Riddle napisał(a):

Productionserver napisał(a):

Z tego co mi się wydaję, to nie musisz kombinować z 33%,
Po prostu robisz flexowy kontener, wrzucasz tam 3 divy (z ta sama cssowa klasa), ustawiasz odpowiedni flex-direction, dodajesz gap i masz.
Potem stylujesz sobie odpowiednio tę klasę

A wrap?

Widać że gość chce mieć więcej niż jeden rząd tych obrazków?

@Skoq: no chyba że chcesz faktycznie mieć jeden rząd, to nie musisz. Ale tak czy tak, musisz jakoś obsłużyć jak pokazać obrazki na mobilce, w ten czy inny sposób.

Chcę mieć zdecydowanie więcej niż jeden rząd ;) 3 to maks w jednym rzedzie gdy mamy sporą rozdzielczość