Add more configurable breakpoints for dynamic layouts

[nicholaschiang]

My portfolio website uses a dynamic grid layout to show two columns of images when the viewport is wide enough and one column when it's too small to fit both (as shown below).

Less than 872px viewport width (one column):

Greater than or equal to 872px viewport width (two columns):

Thus, my breakpoint options need to be able to:

1. Less than 448px viewport width (one column of images + page margin), use 400px images.
2. Between 448px - 872px viewport width, use 800px images (because they now only occupy a single column).
3. Greater than 872px viewport width, use 600px images.

Suggested fix

I suggest that you add an option to pass a nested array into breakpoints that contains [min, max] values for each image size. For example, this would be my solution (once implemented OFC):

<Img 
  src={require('assets/img.jpg')}
  sizes={[400, 600, 800]}
  breakpoints={[[undefined, 448], [448, 872], [872, undefined]]}
/>

Where undefined merely indicates less than or greater than.