This screencast shows how 5 recent posts output by Oxygen‘s Repeater component can be shown in a magazine-style grid layout using the CSS Grid feature of Microthemer (available in beta released today) without barely writing a line of code.
On larger viewports:
767px and below:
479px and below:
Microthemer Settings
You may want to make these changes in Microthemer’s preferences:
Set Always add !important to CSS styles to No.
Minify the CSS file Microthemer generates to Yes.
Click on Edit media queries icon add these so they match with the ones that Oxygen comes with:
1120px and below: @media (max-width: 1120px)
Less than 992px: @media (max-width: 991px)
Less than 768px: @media (max-width: 767px)
Less than 480px: @media (max-width: 479px)
Now the default Microthemer’s media query tabs can be hidden in the interface.
Screencast
Part 1:
Part 2: