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:
![](https://wpdevdesign.com/wp-content/uploads/2019/11/oxygen-repeater-microthemer-css-grid-1024x530.jpg)
767px and below:
![](https://wpdevdesign.com/wp-content/uploads/2019/11/oxygen-repeater-microthemer-css-grid2.jpg)
479px and below:
![](https://wpdevdesign.com/wp-content/uploads/2019/11/oxygen-repeater-microthemer-css-grid3-334x1024.jpg)
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: