12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on May 30, 2020

Wide Image Layout for Galleries using CSS Grid in Oxygen

Sridhar Katakam

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right