I have a container that is a two column grid (gap: “2rem”; columns: “4fr, 3fr”) with an inner block that is a two column grid (gap: “1rem”; columns: “repeat(2, 1fr)”). The inner block has four images inside, and these stack into two rows because of the two column layout.
The inner grid has an overflow until you scroll down so that the last item in the grid is visible on the screen. When you change the columns of the inner block to “repeat(4, 1fr)” everything looks normal.
The attached video is using Troubleshooting Mode with only Bricks and WooCommerce active.
Give the images a width of 100% - this will probably solve the problem. Because they are loaded lazy, the grid only knows their intrinsic size (1024x1024px) until they are fully loaded, which leads to the overflow.
Is there perhaps any way Bricks could prevent this from happening in the future by default? I can’t be the only one who has had this problem. Perhaps a quick internal fix could save you hours of work explaining the fix to customers?
