- 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.
Article is closed for comments.