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, you can invert a CSS grid layout at a breakpoint in Webflow by adjusting the grid template properties in the style panel. Here’s how you can achieve this directly in Webflow without JavaScript.

1. Set Up Your Initial Grid

• Create a Grid element in Webflow.
• Define the columns and rows as needed for your default layout (e.g., multiple columns and a single row).
• Place your elements inside the grid structure.

2. Adjust the Grid at a Breakpoint

• Select the Grid element and switch to the desired breakpoint (e.g., Tablet or Mobile).
• Modify the grid layout:
• Swap rows and columns by changing grid-template-rows and grid-template-columns.
• Use auto-placement by setting auto or 1fr for flexibility.
• Optionally, adjust grid order by modifying grid-row or grid-column for individual items.

3. Use CSS Grid Auto-Flow (Optional)

• If needed, set Grid Auto-Flow to Column (or Row) under the grid settings.
• This ensures that elements follow the correct direction at the selected breakpoint.

4. Test Across All Breakpoints

• Preview the design to confirm that the rows and columns invert correctly at the specified breakpoints.
• Adjust spacing and alignment if necessary.

Summary

You can invert the rows and columns of a CSS Grid in Webflow by modifying the grid template properties and using Grid Auto-Flow at specific breakpoints. This approach does not require JavaScript—only Webflow’s built-in grid controls.