@anderer, The content of items arranged by bricklayer.js or masonry.js have an impact on the process of laying out the items.
In case of a two-column layout, bricklayer adds items to the two columns. However it may happen that a certain item is wider then the allocated 50%. This could for example happen due to wide images or titles.
If an item forces the column to be wider then 50%, the flexbox will then automatically wrap the columns into a single column which occupies the full width. This may cause a flash…
Then the browser may resize elements due to css (eg. resizing images) which may turn the item smaller then 50%, leaving space for the second column. Flexbox now rearranges into two columns. And this may cause a flash…
To test this, you may try the following:
- Resize the viewport until the media query sets the column width to 50% and only one column is being displayed.
- Change the style of class
1rem. The flexbox will now re-arrange into 2 columns.
- Although two columns are displayed, the left column seems wider then the right column. Scroll down until you see an item with title ‘Sprachgewohnheiten Brecher’. This item has a inlined font-size of
1.7rem and cannot wrap. This forces the column to be wider then the right column.
- Uncheck the setting of the font-size and both column will now be equally wide.
- Use properly sized images that fit the column size. Use ‘srcset’ an ‘sizes’ for this. This may also increase performance when smaller images are being loaded for 2 column layout.
- Break long problematic words in smaller ones (which may sometimes be difficult for the German language…)