NO BUG: Bricks 2.0 Grid flex issue

Bugs
1

Browser: Version 137.0.7151.120
OS: Windows
URL: https://staging-gb.instawp.xyz/contact/
Video: YouTube

I have an issue with a query loop inside a grid.

The query results are <li> elements that are set to display: flex.

Desired situation:

  • <ul> set to a 3-column grid (display: grid; grid-template-columns: repeat(3, 1fr);)
  • <li> set to display: flex (to structure content inside each result)

What happens:
Bricks seems to incorrectly link the display settings of the <ul> and its <li> children.

  • If I set the <li> to display: flex, the <ul> also changes to display: flex.
  • If I then change the <ul> back to display: grid, the <li> loses its flex and also becomes grid, with the same settings as the <ul>.
  • When I change the <li> back to flex, the <ul> becomes a flexbox again.
  • This loop continues.

This seems like a bug or improper inheritance/caching behavior inside Bricks Builder.

2

Hi Geert,
Thanks so much for your report!

You are using the same class (the one that applies the grid) on the ul, and the li, so it’s expected that it applies the grid to both. Remove the class from the li and it’ll be fine.

image
image1920×1200 224 KB

image
image1920×1200 132 KB

image
image1920×1200 139 KB

Best regards,
timmse

3

holy sh–! I need a holiday

Thanks @timmse

4

I think so too :slight_smile: Enjoy your weekend :v: