How to change number of images per row on mobile

[geochanto]

It seems that below 768px resolution the images start to stack with one image per row. How can I pass any props if I still want to maintain 2 images per row?

[neptunian]

It's not possible, currently, to force a certain amount of photos per row because the algorithm works by finding the best rows for the width and aspect ratios of those photos. By default the Gallery assumes you want one photo per row in such a narrow container in order to save time calculating a graph by searching through nodes it won't ever use since we only want one photo (node) per row. You can tell it to look for more photos, though, and you may get more photos per row. You can force it to look at more nodes by setting limitNodeSearch={2} on the Gallery. If you do this, though, then you won't be using the default algorithm which checks the width of the Gallery container and decides on a what it thinks is a good number. So when the container is bigger like on a laptop screen, it will at most only have 2 photos per row and possibly one. So instead of passing in a number to limitNodeSearch pass in a function which will give you back the containerWidth and you can decide how many neighboring nodes it should search.

<Gallery photos={photos} limitNodeSearch={
  (containerWidth) => {
    switch (containerWidth){
      case containerWidth < 500:
        return 2
      default:
        return 8
    }
  }
}/>;

Again, with this algorithm, there is no way to set a fixed number of photos per row, otherwise you could end up with very strange looking rows when aspect ratios greatly differ. One way around is to have aspect ratios that are the same, then the layout will be very predictable and easier to control. Along with this change, another thing you can try is adjusting the targetRowHeight. The shorter the row, the more photos it will have (and depending on limitNodeSearch).

[geochanto]

Yes, you are right. It probably doesn't make sense to force 2 images for every row. Basically what I mean is to not force 1 image for every row. I can deal with it, no problem. Perhaps it's something you guys may want to consider in future releases.

[neptunian]

Upped to 2 in v8