In Squarespace, the new editor’s (called Fluid Engine) grid works based on a flex-box (CSS-based code) system which powers its mobile-friendly & responsive behaviors, ensuring the design expands & contracts fluidly between device’s screen sizes.

You can see the grid any time by pressing the G key on your keyboard while in Edit mode on any Fluid Engine section. Press G again to turn the grid back off.

• Desktop’s flexbox grid is 24 cells across
• Mobile’s grid is only 8 cells across

Your website uses the Desktop grid for anything LARGER than the standard size range for mobile phones, which means tablet sizes (iPads, etc) also use the Desktop-sized grid.

Design layouts can be badly affected on tablet size screens if the desktop layout was not designed with responsive behaviors in mind, BUT less than 2% of global internet users browse the web on tablets, so it’s not as big of a deal as you might expect.

• What does the grid do? How does it work?
• Why does the grid snap blocks into place?
• How to use the grid EFFECTIVELY
• Responsive Text Blocks
• Responsive Image Blocks
• Responsive Button Blocks

Mobile vs Desktop changes

The Desktop icon in the top right corner shows the version of the website designed for anything larger than mobile phones.

The Mobile icon in the top right corner shows the version of the website specifically designed for mobile devices ONLY.

If you see a BLUE dot on the Mobile icon, that means changes you’ve made to the Desktop version may need adjustment on the Mobile version.