Available from Uncode 2.6.0 version, the new CSS Grid mode for Posts and Media Gallery module. This model is a simplification of Masonry designed with performance in mind. Thanks to CSS Grid is possible to create simple grids without using JavaScript. According to our tests, there is a significant increase in Google PageSpeed:

• With Filters and Animations: CSS Grid 68, against Masonry 64;
• Without Filters and Animations: CSS Grid 85, versus Masonry 78.

Below we see some examples of CSS Grid:

• Classic Agency (portfolio section)
• Shop Grid
• Shop Sidebar
• Shop Grid Wide

The CSS Grid can be activated from the tab General → Layout, screenshot .

CSS Grid seems to not differ a lot from Grid layouts made using Masonry (even if it's a complete code rewriting). When working in the admin the only real difference is how you define the number of thumbnails for each Row. There are in fact, 4 breakpoints where you can choose for each the number of thumbnails to show and the size in pixels (down) from which the value is applied, screenshot .

Suppose you wonder why the Masonry and Metro layouts don't have such simple controls. In that case, it's because these are based on a calculation of 12 divisions on the container's width (operations necessary to allow to realize all the variations of Posts and Media Gallery layouts for which Uncode is famous).

Please note that CSS Grid is recommended in all basilar layouts where thumbnails are perfectly aligned with each other, and there are no variations. You can notice that it is impossible to change the ratio and the width per single thumbnail in the Single Block tab as it happens for Masonry. The new CSS Grid method is the best choice if you need to create a classic Grid design.