We are trying to accomplish this (https://theme-one.com/the-grid/lima/) within the Grid ELEMENT (not plugin).
SEE IMAGE FOR WHAT WE HAVE:
What we are trying to is fill the gap between the first and second row where there is a gap between items (as seen in image)…
How can this be done?
Hello Randall,
Thanks for writing in! Be advised that the Grid element is using the CSS Grid Layout which you can learn more from here: https://www.w3schools.com/css/css_grid.asp. The Masonry Layout on the other hand is a result of the popular Masonry Javascript library. Check it out here: https://masonry.desandro.com/
With the Grid element, you must make sure that the image element or any element inside the white cells do not have margins so that it will not exceed the cell area. Normally with the grid element, all of the cells are aligned to another. I am not just quite sure why your layout is different. Would you mind providing us the URL of the page where we can check your Grid element?
Best Regards.
Hello Randal,
Do you mean to have a layout something like in the secure note?
(image in the secure note)
You can achieve that by adjusting the vertical X&Y items’ vertical alignment setting it to “Stretch”.
Kindly let us know how it goes.
Sorry if I was not clear. If one of the boxes is longer than the other as shown in the original photograph, can the others surrounding move up? The white box was longer…the goal was to keep it that long and have the black boxes on opposite sides on row 2 line up with row 1 without the extra space.
Hello Randall,
Regretfully what you have in mind is not possible with the Grid element. You must understand that the Masonry layout is using a Masonry Javascript library and it has a different structure compared to the Grid element. It is best that you use The Grid or any equivalent plugin that can display masonry layout instead.
Thank you for your understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
