Masonry Css Grid

Posted onby admin
Masonry v3 was released in November 2020. This update includes ground-breaking support for the brand new 'level 3' CSS grid specification. Currently this is only supported by Firefox Nightly, however you can expect to see other web browsers receiving support for it over the coming months. The Masonry stack has been carefully re-engineered to check if a web browser supports level 3 of the CSS grid specification and deliver this optimised code. If a web browser lacks support for level 3 of the CSS grid specification, then Masonry will use the existing 'CSS Columns' method instead. So this is very much treated as a progressive enhancement. You can login to your Paddle account to see if you are eligible for this free update. If Masonry is listed in your Paddle account, you can download this newer version for free.

I think CSS-Grid in general (and especially for masonry) needs to have a dependency on CSS-Nav where when grid is implemented, the parent grid is the spatial navigation container and default spatial navigation properties are implemented on the objects inside. Bootstrap 4 Masonry Grid layout Template. Imaginative and uncomplicated with the arrangement.

In the past, the Masonry stack has been successfully used for the following tasks:Masonry grid css bootstrap
  • A grid of thumbnail images with links that reveal larger photographs when clicked.
  • Simple web stores combining images, written content and 'buy now' buttons created with PayPal or Mal's E-commerce or Stripe.
  • A video gallery, by combining Masonry with popular video stacks like MultiPlayer, Player, VideoPlayer, VimStack and uTube.
  • Tables of forthcoming calendar events, including maps and downloadable .ics files generated with AddEvent.
  • Creation of a TOC (table of contents) providing section headings, summary text and links.
  • Presentation of client testimonials and reviews from past customers.

Individual bricks can be set as links to other webpages or configured to launch lightbox stacks. Another bonus feature is the ability to make bricks time-sensitive and have them hidden or shown when a certain time has passed - particularly useful for building a calendar of events.
Novice RapidWeaver users should face no intimidation or difficulty constructing layouts with Masonry. We provide only the most essential settings to get the job done! A drag-and-drop user interface makes setup easy. Likewise expert RapidWeaver users will be thankful for the provision of many class selector names in the source code for Masonry; thereby permitting further extension of the stack styling with custom CSS code.
An alternative to Masonry is our ProGallery stack that merges both a masonry grid layout with an image or video gallery. ProGallery also allows you to customise the breakpoints used for mobile, tablet, laptop and desktop, if you require more control over these.

Examples

Here are two examples of the Masonry stack. Starting with the first example, here we are using the default settings (CSS column layout). This creates a simple and flexible masonry layout using pure HTML and CSS.
In this second example, we used the same collection of photographs as above, but this time presented as a Javascript layout. You can hopefully see how the Masonry Bricks are arranged slightly differently in this layout and it becomes feasible to set some Masonry Bricks wider than others.
Masonry Css GridThe photographs featured in these two examples are © copyright of Adam Merrifield and Will Woodgate.

Setup

Follow these instructions for using Masonry in RapidWeaver...

Css Masonry Layout

  1. Once installed into Stacks and RapidWeaver, open your Stacks Library on a stacks page.
  2. Search for 'Masonry'. Drag and drop a copy of the stack into your webpage.
  3. Press the blue button to add Masonry Bricks to your Masonry.
  4. Within each Masonry Brick, add stacks of your choice (e.g. images, text, headings, video or HTML).
  5. If you want to apply links to a Masonry Brick or make the Masonry Brick time sensitive, select it in edit mode and use the settings in the side panel.
  6. To change the layout type used of styling (like spacing, borders or box shadow effects) select the main Masonry stack to change its settings.
  7. Preview the webpage to see the Masonry layout generated. Export or publish your webpage when done.

As mentioned above, Masonry supports many different content and stack types. This layout grid is not restricted to only being able to do images! Our example above uses warehoused images by means of simple HTML image tags inside HTML stacks:
You can follow the same technique for warehoused images or use existing Image stacks if you prefer using dragged-and-dropped images instead.
Note: A bug in some versions of RapidWeaver may cause columns to render empty in RapidWeaver preview. If this happens to you, try previewing the page in a normal web browser. Realmac Software were made aware of this problem, but didn't respond to say if or when it will be fixed.

Differences between the CSS Columns and Javascript grid layouts

You may have noticed in the Masonry settings that two grid layouts are offered to you. Essentially Masonry gives you two stacks in one! Here are the most noteworthy differences between the two.
CSS Columns
  • Faster loading, as the page opens.
  • Responds better to screen resizing and orientation changes.
  • If the content within bricks changes size (like a toggle) the layout reflows to fit.
  • Bricks are positioned top to bottom, then left to right (like newspaper columns).
  • More precise control of columns at different screen widths.
  • Significantly smaller codebase, less risk of conflicts with other stacks.
Javascript
Css
  • Ability to set some bricks double or triple width.*
  • A subtle animation effect is applied when the page changes size or orientation.
  • Bricks are positioned left to right, then top to bottom.
  • Less suitable for complex stack types or content that changes size.
  • Better compatibility with older web browsers that lack CSS3 support.
* If using the Javascript grid layout, selecting an individual Masonry Brick allows you to change its width between normal, double or triple. Double width means the Masonry Brick spans two columns and triple means the Masonry Brick spans three columns. This setup works best where you have lots of normal sized Masonry Bricks to fill the gaps.
Both grid layouts are about the same complexity to setup, so it is well worth experimenting with both to see which one works best for you. CSS columns are simpler and more reliable; however the trade-off with this layout is that the Masonry Bricks may not render in the desired direction and all Masonry Bricks will be the same width.

Applying links to Masonry Bricks

Css Masonry Grid Left To Right

It is common to set Masonry Bricks as links to resources or other webpages. You can apply links to content or buttons you place within each Masonry Brick. Alternatively you can select the Masonry Brick in edit mode and provide a link in its settings. Using this latter method, the link will be stretched over the whole Masonry Brick; so in effect the entire Masonry Brick becomes clickable. In edit mode, the link URL is displayed above the content. Custom attributes can be applied to the links if you prefer, like class or data attributes.

Lightbox support

Lightboxing is now provided on a BYO (bring your own) basis. Older versions of Masonry used to use the Nivo Lightbox. Some people found this too limiting or too unreliable. Lots of really good lightbox stacks already exist for RapidWeaver. So we decided to forego adding any dedicated lightbox support in the latest version of Masonry. You can now use the Masonry stack with almost any free or paid lightbox stack. This brings the benefit of greatly reducing the amount of code in your webpages and ensures the lightbox you configure for Masonry is consistent in function and appearance to lightboxes you are using elsewhere in your website.
Essentially there are two methods for lightboxing your content:

Masonry Style

  1. Drag and drop a suitable lightbox stack into each Masonry Brick. A free lightbox stack like LiteBox would be perfect for this task.
  2. Add the lightbox stack somewhere else in the page. Where you see the setting to change the selector name of the 'trigger' enter .masonry_brick a in the box. Then your lightbox will open any link you have applied to the Masonry Bricks.

Some lightbox effects (like TopBox) have support for an extensive choice of different content types. When you are assigning links to your Masonry Bricks, it may be necessary to add additional custom attributes. Masonry supports custom attributes added to links, without any problem.
By using this website, you agree to the privacy policy

Masonry seems to be one of these things that for years the web has struggled with but has found no real meaningful solution. When I speak about Masonry, I am talking about the type of layout which is most famously used on Pinterest, where elements 'fill' the gaps underneath them. This differs quite a lot from flex or grid, which have fixed row width.

This idea has been popular for a while, and there is even a hugely popular Javascript Masonry plugin. It always would baffle me why such a large library was required for what seems like it should perhaps be the default behaviour of divs on a page. A truly native solution has always been lacking.

Enter: CSS Masonry

The CSS Working Group has now created a proposal for masonry with just CSS, using just a few lines of code, which will work both on the horizontal and vertical axis.

Simple, right? Why hasn't anyone done this before? Well, apparently it's pretty hard to standardize, which is probably why a native solution has taken so long to get to us. Should items auto fill gaps? How do you manage order? Or what order should a screen reader read the boxes in?

Because of all these uncertainties, support remains thin on the ground and in fact Firefox is the only browser with experimental support. That means, realistically, we can't use the CSS only version anywhere today.

Should this really be a grid feature?

Since CSS native masonry is pretty much off the table for now, we have to make do with some other solutions. I would question at this stage if the grid specification is the right place to put masonry at all, since grids by their very nature are grids. They have a fixed structure.

Consider a grid, which has rows, which items can be assigned to. Now, if we decide to turn that into masonry, items can now overlap rows and be assigned to different rows at the same time. This logical conundrum makes it very difficult to understand how a masonry style grid layout would work.

In my view, masonry fits much more easily into the CSS flexbox specification, and logically this seems to be the direction that makes sense. In any case, I hope we end up with some implementation, since the current options are severely lacking. The real risk is that it is realised that this should be a flex feature too late, and we waste time waiting for the feature to be added.

Flexbox even sounds right - a box that flexes could flex both vertically and horizontally. By shoehorning this functionality into CSS grid, we might end up making this whole endeavour far more complicated than it really needs to be.

Implementing Masonry Today

The disconnect for me is that most people want a very basic functionality when it comes to masonry - to fill in the gaps. Most plugins, however, provide very advanced functionality for edge cases most people are not concerned about, i.e. when you have really abnormally shaped items.

As such, I have produced my own version below which does exactly what you'd expect masonry to do:

  • Fill in the gaps
  • Adjust automtically to CSS changes
  • Create a container of the correct height

Although this is a static implementation, you could re-run the Javascript to update should more items be added.

It is possible to do this with just CSS as shown here, although if you are trying to use masonry, the chances are you will be using Javascript too, so why keep it CSS only?

Using just a bit of Javascript (roughly 35 lines with comments), we can recursively align all divs within an element with masonry. We can also identify which columns items fall into, and set the max height of the container.

A full demo can be viewed below, and for your viewing pleasure, a Code Pen Demo with Source Code can be found here.

Simple Masonry Demo

Item 2
Item 4
Item 6
Item 8
Item 10
Item 12

Masonry Grid Css Flexbox

Conclusion

Masonry Blocks Css

In conclusion, today, masonry can be achieved with some very lightweight Javascript, and in a few years we may have a native CSS solution. I hope you find this page useful!

Masonry Grid Css Only

What do you think of masonry in CSS? Let me know your thoughts on twitter.

More from CSS