I want to try and recreate an image gallery that has a n number of rows based on the number of images from an array but also the columns/images per row can be a single large image, two smaller images or 3 even smaller images. It appears that they are using flexbox and css grid but my brain is rocked trying to figure out how this is done. It almost seems to be generated randomly on what columns are 1, 2 or 3 images wide but it is the same result every time the page is loaded. I am new to css grid and flexbox so how they are generating this layout dynamically based on the number of images is hard to figure out. I am using react, styled-components, css grid, flexbox, etc.
Example image gallery and interactivity showcase: https://imgur.com/9n5vo3l
It appears the grid they are using has 7 columns
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
I assume that the rows are auto generated but it is the columns that are tripping me up.
Each cell or item in the grid can have grid-column: starts/ends of either
1/7 for the large image or
1/4 then 4/7 for the two side by side images or
1/3 3/5 5/7 for the three side by side images
Anyone know how such an effect can be done dynamically?