How can I create a fixed-size grid/table in Webflow that remains 940px across all device sizes and enables side-scrolling for overflow on small devices?

You want to create a fixed-width grid or table (940px) in Webflow that stays the same size across all screen sizes, and allows horizontal scrolling when the screen is too narrow. Here's how to do it:

1. Create a Scrollable Container

• Add a Div Block to your page.
• In the Style panel, set the container’s width to 100%.
• Set Overflow: Auto or Overflow: Scroll (X-axis) to allow side-scrolling when needed.
• Give it a class like scroll-container for reuse.

2. Add a Fixed-Width Inner Grid/Table

• Inside the scrollable container, add another Div Block and give it a class like table-wrapper.
• Set the width of this div to 940px.
• Apply any desired layout: CSS Grid, Flexbox, or manual structure using nested divs for a table-like design.

3. Build Your Grid/Table Content

• Inside the table-wrapper, build your grid using:
• CSS Grid: Set Display: Grid, define your columns (e.g., 4 columns at 235px), and add your content.
• Or use Flexbox Rows with repeated child elements for a table structure.

4. Optional: Add Styling for Better UX

• To improve scrolling and usability:
• Add padding to the scroll-container.
• Enable horizontal scrolling only: Set Overflow-X: Auto and Overflow-Y: Hidden.
• Hide scrollbars on desktop using custom CSS if desired (via Embed element or Site settings).

5. Test on Different Screen Sizes

• In Webflow Designer, preview the layout on tablet and mobile views to confirm the 940px table triggers horizontal scrolling without scaling down.

Summary

To create a fixed 940px grid or table in Webflow, wrap it in a 100% width scrollable container with Overflow-X: Auto, then place a 940px wide inner div that holds your grid or table layout. This setup ensures the element stays fixed in size, and scrolls horizontally on smaller screens.