Can Webflow's CSS grid be inverted at a breakpoint to switch the rows and columns? How can I achieve this without JavaScript on my website?

Yes, Webflow's CSS Grid can be adapted at different breakpoints to switch rows and columns, effectively “inverting” the layout—without using JavaScript—by adjusting the grid's layout manually in the Designer.

1. Use Webflow’s Grid Controls for Base Layout

• Create a CSS Grid layout in Webflow using the Designer.
• On your default (desktop) breakpoint, position your grid children as needed with explicit row and column placements.

2. Modify Grid at Specific Breakpoint

• Select a target breakpoint (e.g., tablet or mobile).
• Manually adjust the grid layout for that breakpoint:
• Use the Grid Editor to change the number of columns to rows (or vice versa).
• Reposition grid children to the desired row and column lines/areas.

Example:

• Desktop layout: 2 columns x 1 row
• Mobile layout: 1 column x 2 rows

You are effectively mimicking an inversion—columns become rows and vice versa—by redefining the structure and reordering the content visually at the breakpoint.

3. Use Named Grid Areas (Optional for Clarity)

• Assign named grid areas in the default layout.
• At breakpoints, redefine area mappings based on the new layout to keep control organized.

This technique helps keep your layout responsive and understandable, especially when working with larger grids or responsive content shifts.

4. Double-Check Positioning for Each Breakpoint

• After editing one breakpoint, review others to ensure content is not affected.
• Webflow retains your layout changes specific to each breakpoint, so changes do not cascade upward.

Summary

You can invert a Webflow CSS Grid layout at breakpoints by manually adjusting rows, columns, and item placements in the Designer—no JavaScript is needed. Use the Grid Editor per breakpoint to achieve the desired responsive behavior.