Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
Bug: Infinite Scroll Incompatible with Generated nth-child Grid Placement Rules on Mobile
Bricks Version: Most Recent
Browser: All mobile browsers (confirmed on iOS Safari, Chrome Android)
Page: Attorneys – MoundCotton
Summary
When a query loop uses infinite scroll on mobile, the grid layout breaks on the second page of results. The initial cards render correctly. Any card injected by infinite scroll renders as a single-column block, ignoring the defined grid structure.
Root Cause
Bricks generates explicit nth-child grid placement rules scoped to the initial known card count. For example, at 478px:
#brxe-lmquck :nth-child(1 of .brxe-lsnwty) { grid-column: 1/2; grid-row: 1/2; }
#brxe-lmquck :nth-child(2 of .brxe-lsnwty) { grid-column: 2/3; grid-row: 1/2; }
… up to nth-child(6)
When infinite scroll injects cards 7+, no placement rules exist for those items. CSS grid falls back to the implicit grid, which has no defined row size, causing injected cards to stack as full-width blocks outside the intended column structure.
Additionally, the .brx-query-trail anchor element occupies a grid cell, further corrupting auto-placement math for injected items.
Steps to Reproduce
- Create a query loop with infinite scroll enabled
- Set posts_per_page to any value below the total post count
- On mobile breakpoints, configure the grid container with 2 columns (e.g. repeat(2, minmax(0, 1fr)))
- Load the page on a mobile device or emulator
- Scroll until infinite scroll triggers the next page
Expected: Injected cards continue the 2-column grid layout
Actual: Injected cards render as full-width single-column blocks
Thoughts
The grid-template-columns definition is correct and sufficient for CSS auto-placement to handle unlimited cards natively. Bricks overrides this by generating explicit nth-child placement rules based on the initial static render count. This creates a hard ceiling that is fundamentally incompatible with dynamic content injection via infinite scroll — two core Bricks features that cannot coexist without intervention.
The workaround is to override Bricks’ generated CSS and restore na@mediaive auto-placement:
@media (max-width: 767px) {
#brxe-lmquck { grid-template-rows: unset !important; }
#brxe-lmquck .brxe-lsnwty { grid-column: unset @mediaimportant; grid-row: unset !important; }
}
@media (max-width: 478px) {
#brxe-lmquck { grid-template-rows: unset !important; }
#brxe-lmquck .brxe-lsnwty { grid-column: unset !important; grid-row: unset !important; }
}
#brxe-lmquck .brx-query-trail { grid-column: 1 / -1; height: 0; overflow: hidden; padding: 0; margin: 0; }
This confirms the issue is entirely in Bricks’ generated output, not the query or grid configuration.
Suggested Fix
When a query loop has infinite scroll or load more enabled, Bricks should not generate explicit nth-child placement rules. Native CSS grid auto-placement handles this correctly and requires no intervention.