Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • What is a Layout Grid
  • How to add a Layout Grid
  • How to disable a Layout Grid
  • How to edit a Layout Grid
  • Auto and Limited content width

Was this helpful?

  1. Setka Content Design System Manager

Configuring layout grids

How to configure a layout grid

PreviousComponent examplesNextEditing default elements with Custom CSS

Last updated 2 years ago

Was this helpful?

What is a Layout Grid

Layout Grid creates a unified and recognizable style for your publication by effectively organizing your content.

Setka Editor uses column grids — the basic grids in graphic design. In addition to that, you get horizontal rows constructed depending on your font size. Their configuration depends on the number of columns, margins, and gutters.

Column grids help develop a design for various devices: computers, tablets, and mobiles. Columns provide necessary limitations that enable you to arrange the content efficiently and coherently.

Setka Editor provides four layout grids by default: with 6, 8, 10, and 12 columns.

How to add a Layout Grid

You can add as many of your layout grids as you like. To do it, click Add Layout Grid. Then specify the number of base columns, the gutter between them, and the side margins (horizontal margins):

How to disable a Layout Grid

To disable the grid, click on the arrow, and select Disable. It will remove the chosen grid from the Layout Grid section, but posts that use this Layout Grid will not lose their appearance.

Delete this layout grid option will remove it altogether.

You cannot delete all layout grids — as at least one layout grid is required for any post.

How to edit a Layout Grid

All settings of the Layout Grid, except the number of columns, can be changed.

You can't change the number of columns — otherwise, posts using this Layout Grid will be losing their appearance.

Press the Advanced spoiler to switch your Layout Grid between Auto and Limited. You can also edit Horizontal margins and Content width limit (only for Limited Layout Grid).

Changes made will automatically apply to all posts that use this Layout Grid.

Auto and Limited content width

You are prompted to select either Auto or Limited widths when adding a new layout Grid. This option is located under the Advanced spoiler.

Auto width fits 100% of your content container. The margin width remains constant; container size stays unchanged on window resize.

Limited width lets you set an exact maximum content width limit in pixels. Margins are fluid and fill all the available space between the container and post content's width, which keeps content in the center. Select a Limited Layout Grid when your images are overhanging the post width.

Video tutorial on how to add a layout grid in Setka Content Design System Manager
Video tutorial on how to add a layout grid in Setka Content Design System Manager
Disable the Layout Grid in Setka Content Design System Manager
The Edit Layout Grid button in Setka Content Design System Manager
Advanced spoiler in Layout Grid settings section of Setka Content Design System Manager