The 'mobile-up' gallery is based on a 'Fallback-first' before switching to CSS grid at the first breakpoint. The images have been positioned into a line-based grid system, and each image covers more than just one cell.
The challenge is really to find images in a size that fits into the grid without losing their proportions, and it is important to let the images have some size to play with, so don't make them too tiny in the preparation. It needs a bit of practising. Start with a small grid and few images, then you can expand. This gallery covers 7 x 7 cells. The maximum is 12 x 12.
Internet Explorer does not 'understand' CSS Grid, so Flex-positioning has been used for the Fallback in the 'mobile-up' version. It proved extremely difficult to do the same for the 'desktop-down' version, so if viewed in IE, you will just see a column of images displaying. And also, make sure the 'Display Grid' is selected for the option 'Design for' on the Styles pane when you open the component in Site Designer.
CSS Grid Gallery
The 'mobile-up' gallery is based on a 'Fallback-first' before switching to CSS grid at the first breakpoint. The images have been positioned into a line-based grid system, and each image covers more than just one cell.
The challenge is really to find images in a size that fits into the grid without losing their proportions, and it is important to let the images have some size to play with, so don't make them too tiny in the preparation. It needs a bit of practising. Start with a small grid and few images, then you can expand. This gallery covers 7 x 7 cells. The maximum is 12 x 12.
Internet Explorer does not 'understand' CSS Grid, so Flex-positioning has been used for the Fallback in the 'mobile-up' version. It proved extremely difficult to do the same for the 'desktop-down' version, so if viewed in IE, you will just see a column of images displaying. And also, make sure the 'Display Grid' is selected for the option 'Design for' on the Styles pane when you open the component in Site Designer.
Download the 'mobile-up' component (displayed)
Download the 'desktop-down' component