Masonry - blocks in the form of brickwork using pure css. Masonry Layout to optimize space This option has a lot of disadvantages

07.10.2023

Hi all! Today I would like to talk about how you can make blocks in the form of brickwork(masonry from English - brickwork), that is, blocks of different heights will be placed beautifully under each other without large empty spaces. Yes! All this can be done very easily using css.

There is a property in css with which you can create multi-column text or blocks. We will use it.

This is what the property is called columns. This is a universal property that allows you to immediately set the width and number of columns. You can read more about it in a good css reference book.

So, it's actually very simple. For example, we have 6 elements of different heights, but the same width. A striking example is the sidebar (side column) on websites. Here all the blocks are the same width, but different heights. Typically, in the mobile version of the site, the sidebar is placed after the main content, at the bottom of the site, and the content itself is made to fill the entire width of the screen. Naturally, it is also irrational to place a sidebar in one column, since there will be a lot of free space on the sides, especially when viewed from a tablet.

But, if the blocks are given the property display: inline-block, then they will automatically, if the width of the container is sufficient, be arranged in several columns. However, things may not look very pretty:

Agree, these indentations between the blocks don’t look good at all. Therefore, this urgently needs to be fixed! For this to the container block, in which the blocks are located, you need to add the necessary styles:

Moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto;

For cross-browser compatibility, we use properties for Firefox and Webkit browsers (Chrome, Safari, Android). For example, we will arrange the blocks using a bulleted list, then the styles for the example in the picture will look like this:

Ul ( width: 1050px; -moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto; ) li ( display: inline-block; box-shadow: 0 0 8px #555; list-style: none; padding: 10px; width: 300px; margin-bottom: 30px; vertical-align: top; )

In this case, the blocks will be arranged in several columns minimum 300px wide, and the number of columns will be automatically determined by the browser. This is useful for creating adaptability. In this case there will be 3 columns, and this is what it will look like:

You will have to select the width of the container (1050px) if you want the vertical distance between the blocks to coincide with the horizontal distance. Otherwise, the width between columns will be set automatically by the browser. There is a property column-gap, which specifies the distance between columns. But in this case it will not work the way you want.

There is another option: for blocks you need to set the width:100% property. Also, if the padding property is set, as in my case, then you need to set the box-sizing: border-box property. Now you can safely add the column-gap property to the container to set the distance between columns. This way it will work as it should.

Agree, it looks much better this way! You can also place “div” blocks inside a “div” container. Or, if you need to distribute the text into several columns, then simply add the required text to the “p” tag with, for example, the “text” class and set the property for this class columns.

That's all! So simply, without unnecessary scripts, you can arrange blocks in the form of brickwork or text in several columns. But keep in mind that in this case it will look beautiful only if the blocks are the same width. Otherwise, all that remains is to use a good masonry script. The script automatically absolutely positions each block. But that is another topic…

That's all! If you have any questions or comments, leave them in the comments. Good luck!

A Simple Masonry Layout plugin. with simple shortcode, You can add Masonry Layout For Posts , custom post types .And Even Masonry Layout Gallery For Posts and custom post type. Very easy to Use with very simple shortcodes. Better Grid View of Posts, custom post types.

This plugin will modify your Blogs to better looking advance Masonry(Grid) Layout with use of simple available shortcodes.

Masonry Layout Blog.
Masonry Layout Blog from Specific Category.
Masonry Layout custom post type.
Masonry Layout Gallery For Posts
Masonry Layout with Simple Responsive Gallery Popup.
Simple Shortcode can be used for Masonry Layout.
Shortcode can be either used in editor or can be used in template files.

FAQ

Is plugin compatible with every theme ?

Yes, this plugin is 100% compatible with every free, custom and paid theme. You can even use this plugin to modify default WordPress theme into better looking Masonry(Grid) Layout theme with simple available shortcodes.

Is Masonry Layout Responsive?

Yes, Masonry Layout is Responsive. It has Responsive Jquery popup too.

Change log

1.3.2

cdn link added for font-awesome

1.3.1

Minor Fixing on enqueue script and style

1.3

Minor Fixing on Pagination
Added setting for enable or disable Jquery Popup
Added Featured Image link to post permalink
jQuery version conflict resolved
Fixed Overwriting wordpress default jQuery version with 1.8.2

1.2

Added shortcode for Masonry Layout Blog from Specific Category
Added Pagination
Added allow multilanguage

Added Simple Responsive Jquery Popup

Added Post Title URL link to Gallery

Added Post Title URL setting

Enabling the script jQuery Masonry included in the core libraries of WordPress 3.5 allows you to easily change the approach to displaying posts on the main page of your site. This script allows you to present all posts and pictures in the form of a single “wall of bricks”, regardless of the length of the post and the size of the pictures, which makes the site visually more attractive to readers and also resembles the appearance of a currently popular service Pinterest. Using jQuery Masonry, all posts “adjust” to each other and fill the entire space allotted to them without “gaps” or “empty spaces” on the main page. Let's figure out how to set up this look for your website.

What is output in brick format?

Displaying content on a page with these post display settings resembles, as we have already said, the main page Pinterest. All posts are ordered vertically and fill all the space allocated for the feed. You can also use floating CSS, but in this case you risk encountering “white spots” on the page, since the content is first ordered horizontally and only then vertically. In the case of jQuery Masonry, the problem of "blank spots" can be easily solved.

Floating CSS Example

jQuery Masonry example ("brick" structure)

In the case of jQuery Masonry, each post fits perfectly into the overall structure, and there are no “white spots”.

Let's create a fairly simple display of your posts based on a jQuery Masonry script, since we already know what the “brick structure” is for displaying posts on the main page and how it works.

Step 1: Use wp_enqueue_script to load the library

Before starting work, you need to download a script suitable for this task. To do this, add the following code to a file called functions.php:

Function mason_script() ( wp_enqueue_script("jquery-masonry"); ) add_action("wp_enqueue_scripts", "mason_script");

Step 2: Setting up the grid

For the main layout of our structure, add the following code HTML into the loop (or into the part of the template where we plan to use our “brick wall”). First, let's set up a common container for all such posts, and then enable this type of display for each individual post:

Customizing CSS

We also need to specify the width of the container block and the width of the individual post to maintain the “Pinterest-like” look we want. In our example, we set the bandwidth to 960 px, and we get 4 columns posts with a width of 240px for each post. We remember these parameters and configure the output in the style sheet:

#container ( width: 960px; // width of the entire container for the wall ) .brick ( width: 220px; // width of each brick less the padding inbetween padding: 0px 10px 15px 10px; )

Step 3. Configuring the function

JQuery(document).ready(function($) ( $("#container").masonry(( columnWidth: 220 )); ));

Conclusion

Masonry comes with many built-in options for using this script within WordPress. For example, you can apply animation effects to “revive” your posts, add additional settings “to the wall” and arrange the content output in a certain order, or use this script along with Infinity Scroll . Regardless of how you use the jQuery Masonry script, it's great that it was added to WordPress 3.5.

Have you come across sites where blocks of different sizes are displayed in a container, filling the space as efficiently as possible?

David's DeSandro script, which is called Masonry(from English brickwork). You can also see a clear example on the official website of the script. On off. On the website you will find complete documentation in English.

Masonry is a Javascript library that allows you to display HTML blocks in a compact, folded form. The script analyzes the height of each block and places it as space-saving as possible.

Perhaps someone has heard about it for a long time and even used it in their projects, but I came across it for the first time recently. I can't say that everyone can easily draw any conclusion. But I think everyone can handle basic use. It’s not so easy to figure out what and how it works there, but I also can’t say that it’s very difficult. If you are well versed in JS, then any output should work. The purpose of this post is to introduce you to Masonry and leave a note about it for yourself.

Masonry works independently without using libraries, but can also be used as jQuery plugin

In this post I will translate the main page of the off-site, which explains how to start working with the script.

Masonry in Javascript

Masonry connection

These installation packages contain everything you need to use Masonry:

function mason_script() ( // wp_register_script("masonry", "/path/to/masonry.pkgd.min.js"); // the top line is not needed because WordPress comes with masonry by default, so you can just connect it. wp_enqueue_script("masonry"); ) add_action("wp_enqueue_scripts", "mason_script");
HTML

Masonry works with container elements that have the same item class:

...

...

...
...

You can specify any class, the main thing is to specify the itemSelector option when calling: ".item" .

CSS

For container blocks, you need to specify the width. The width must be selected according to the container and the columnWidth parameter (column width):
Item ( width: 25%; ) .item.w2 ( width: 50%; )
Enabling Masonry (Initialization)

For the script to start working, it needs to be applied to our container. Running the script as an instance in pure javascript does this:
Var container = document.querySelector("#container"); var msnry = new Masonry(container, ( // Settings columnWidth: 200, itemSelector: ".item" ));
In this case, the instance constructor contains 2 arguments: columnWidth (the width of the column) and itemSelector (the class of blocks in the container that Masonry will work with). These are not all the options, see the rest in the documentation or below on this page.

Initialization via HTML

Masonry can be launched without using Javascript, directly from HTML, by specifying the js_masonry class to the container and specifying the options in the data-masonry-options attribute:
Options set in HTML must be in JSON format. Arguments must be in quotes "itemSelector": . Please note that the HTML attribute value must be in single quotes " because JSON properties use double quotes " .

Initialization via jQuery

You don't need jQuery to use Masonry, but if you're more comfortable working with jQuery, masonry works with it as a plugin.
Var $container = $("#container"); // Initialization $container.masonry(( columnWidth: 200, itemSelector: ".item" ));
To get the instance use the .data("masonry") method:
Var msnry = $container.data("masonry");
Initialization for image blocks

Since pictures are loaded separately from the HTML code, using "Masonry" for blocks with a picture usually causes an error - one block overlapping another. This happens because Masonry fires before the image in the block is loaded, the height of the block is set, and then the image “destroys” this height. There are several ways to solve this problem:

Method 1

Set rigid dimensions for all images: width and height in pixels.

Method 2

Hang Masonry processing on the load event. jQuery code:
JQuery(window).load(function())( jQuery(".masonry").masonry(( columnWidth:310, itemSelector:".box, .item" )); ));
The disadvantage of this method is that you will most likely have to wait for the entire “window” to load: jQuery(window).load . Using load on an element alone is rarely acceptable because jQuery will interpret it as an AJAX load function. To avoid this, use the 3rd example.

Method 3

Initialize the work of Masonry after all the pictures have been loaded. And to check the loading, use the additional JS script imagesLoaded . Code:
Var container = document.querySelector("#container"); var msnry; // Initialize Masonry, after loading images imagesLoaded(container, function() ( msnry = new Masonry(container); ));
jQuery code:
Var $container = $("#container"); // Initialize Masonry, after loading images $container.imagesLoaded(function() ( $container.masonry(); ));
Note: an error may also occur when using additional fonts, so you need to check the loading of fonts.

Properties

The required properties are: columnWidth and itemSelector . All others can be used as desired:
ItemSelector (string) (required) Determines which child element of the container will be used when building the masonry. The element must be specified to exclude other container elements that are used to set sizes see "columnWidth": ".grid-sizer" .
Default: no columnWidth (number/element/selector as a string) (required) Column width in pixels: "columnWidth": 60 . If you set a selector or element, masonry will use the width of the set element: "columnWidth": ".gutter-sizer". Masonry calculates the external width of the blocks, taking into account the css properties border, padding, margin.
Default: no containerStyle (an object) CSS styles that are applied to the container. To cancel the application of masonry styles to a container, specify containerStyle: null
Default: ( position: "relative") gutter (number/element/selector as a string) Space between elements, similar to margin-right . Example: "gutter": 10
Default: 0 hiddenStyle (an object) Styles applied to hidden elements.
Default: ( opacity: 0, transform: "scale(0.001)" ) isFitWidth (logical) Sets the width of the container to the available number of columns, calculated from the width of the container elements. Once set, you can center the container via CSS. The note: this property does not work if the width of the container elements is set to %, it needs to be in pixels: width: 120px . Also, option columnWidth should be set to a fixed value, for example: columnWidth: 120 .
Default: false isInitLayout (logical) Enables block tuning during initialization. Set to false to prevent the script from building a brick upon initialization, so you can use methods and add events before processing container elements.
Default: true isOriginLeft (logical) Controls the horizontal arrangement of blocks. By default, blocks are arranged from left to right. Set to false to arrange blocks from right to left.
Default: true isOriginTop (logical) Controls the vertical arrangement of blocks. By default, blocks are arranged from top to bottom. Set to false so that the blocks are arranged from bottom to top.
Default: true isResizeBound (logical) Links the location of blocks to changes in window size.
Default: true stamp (element/array of elements/string selector/NodeList) Determines which blocks need to be committed during output. These are special elements to which the masonry effect will not be applied. "stamp": ".stamp"
Default: no transitionDuration (line) The transition duration (animation speed) when blocks change position or appear. Needs to be set in time format for CSS. To cancel all animation set to 0: transitionDuration: 0
Default: "0.4s" visibleStyle (an object) Styles that will be applied when showing hidden elements.
Default: ( opacity: 1, transform: "scale(1)" )
Masonry in pure CSS

Recently, almost all browsers understand the CSS column-count property.

And if so, then there is no longer a need to connect javascript and you can make Masonry blocks using pure css. Of course, this option is less flexible in settings, but it is much simpler and faster to install and easier to understand.

The point is this.

We have this HTML code:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

...
...
...

And we connect the following css styles for it:
/* Container of Masonry blocks */ .masonry ( column-count: 4; // how many columns are needed? column-gap: 1em; // gap between blocks (right or left) /* the same with the necessary prefixes as of March 18, 2016 * / -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; ) /* Masonry blocks */ .masonry .item ( display: inline-block; // important! width: 100%; // important! margin-bottom: 1em; background-color: #eee; )
This option has a lot of disadvantages

Let's go over the disadvantages of this method and how it is inferior to Masonry.
Articles on the topic

Asia-Pacific Economic Cooperation

Asia-Pacific Economic Cooperation (APEC)

Russian Ambassador to North Korea: North Korean denuclearization will cost a lot of money It turns out that the ball is now in Seoul’s court

Rereading my father. Alexander Beck. Brief biography of Alexander Bek Alexander Bek biography

Evolution in reverse: Are animals former people?

Complication of the external structure of plants