This members-only tutorial provides the steps to replace the default Flexbox layout for image galleries in Oxygen with a custom responsive CSS Grid layout that shows a wide feature image at the top with the rest in columns.
Before:
After:
We shall set up the grid to show 5 columns on large viewports (typically tablets in landscape and desktops), 4 columns from 991px and below, 3 columns from 767px and below and finally, a single column from 479px and below.
Step 1
Assign a class of gallery-grid-wide-top to your galleries for which you wish to have the wide image layout.
Step 2
Add the following in an existing or new Stylesheet at Manage > Stylesheets: