Flexbox and CSS Grid Layout Options for Gallery Module

[MrFent]

With the new Box Module's release, people are learning more about and using Flex and CSS Grid. I would like to see these options available in the native Gallery module. Currently, the Gallery module has two layout options:

• Collage
• Thumbs

In Collage mode, the images are placed in a mosiacflow column from top to bottom (See screenshot)

With the images loading top to bottom in each column, there isn't any way to use custom CSS to override the layout using Flexbox or CSS Grid.

In Thumbs mode, all of the images are placed in a single parent div. However, each image is set to position:absolute dynamically based on screen size. (See screenshot)

It might be possible to use !important CSS to override these dynamic position, top, and left styles, and apply custom Flexbox or CSS Grid styling. However, in this mode, each image is only showing the 150x150 thumbnail. There is no way to get it to show the full image.

That's why I propose adding Flexbox and CSS Grid to the Gallery module's Layout options. Each new mode could use the same grid and flexbox options that are in the Box module.

[craigcpaterson]

Great idea. It should now be a pre-requisite that any modules which provide layout options should have the option to use Flexbox and CSS Grid going forward.

[studioavanti]

100%