Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • Add a grid to a section
  • Customize a grid
  • Change a grid layout
  • Add more cells to the grid
  • Manage the cell size
  • Delete a cell

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements

Cells and grids

PreviousNavigationNextConstraints

Last updated 7 months ago

Was this helpful?

The grid is made up of cells, and each element, or group of elements, gets its own cell. In a grid, you can add multiple cells to arrange elements in a specific order and control their size.

Cells and grids are powerful tools to create structured and responsive layouts, ensuring your page looks stunning on any device.

Add a grid to a section

Steps:

  1. Click Quick add, locate and drag the Grid element to the canvas.

or

Click Layout in the Advanced elements section, select a grid layout you want, and drag it to the canvas.

Customize a grid

Change a grid layout

Customize your grid to get the exact layout you want. You can change the number of grid columns, adjust the cell size, and the gap between them using the Inspector panel.

Steps:

  1. Click the relevant grid.

  2. In the Inspector panel > General tab, locate the Layout settings.

  3. Change the number of columns (between 1-12 columns).

Set the column gap and row gap between the grid cells.

For mobile view, you can enable the cells to be swipeable.

Add more cells to the grid

You can add up to 12 cells in a grid.

Steps:

  1. Click the relevant grid.

  2. In the Inspector panel > General tab, locate the Manage cells section.

  3. Click Add cell to add more cell to the selected grid.

Easily duplicate or reorder a cell using the Manage cells section.

Your design only applies to the breakpoint you're working on. You should tailor the grid to each breakpoint to ensure the composition of your elements is flawless.

Manage the cell size

Manage the cell size (width and height), or expand it to create a hierarchical grid.

Steps:

  1. Select the relevant cell.

  2. In the Inspector, locate the Size section.

  3. Set the column span, row span, width, and height of the cell.

For example, in the grid below:

  • After setting the first cell is set to have:

    • Column span: 2 columns.

    • Row span: 2 rows.

Delete a cell

You can remove a cell at any time. This deletes both the cell and the element within.

Steps:

  1. Select the relevant cell.

or

  1. Select the grid that contains the cell you want to delete.

Click Add elements on the left side of the Editor or press E.

: Columns setting is set 3 columns.

Click the Delete button on your keyboard.

In the Inspector panel > General > Manage cells, click the Remove button next to the relevant cell.

Grid layout