Learning & Support


Styling: Grid Styles

Twixl Support Team Updated: - Created :

    When you envision the appearance of your app and how it presents itself to the user, the 'Grid Style' is one of the first things you should think about. What elements will be used: banners, showcases, collections...? And how should these be defined in a grid structure? It might be helpful to first make a mock-up of the Root Collection (and other collections) design and design this mock-up in a grid of squares. This will be the base of your browse grid definition on the Twixl Platform.

    Twixl Publisher apps use a concept we call "Browse Pages" as a flexible way to present your content to readers and the design of these browse pages is defined by the browse grid. While browse pages can still mimic the behaviour of the traditional kiosk that contains different issues, the flexibility goes much further. Note that browse pages can be intended either for scrolling vertically or horizontally.

    1. Defining the structure of your browser page(s)

    The layout of your browse pages will be defined using a grid-based approach. First of all, define a number of columns for your pages. Then, based on that number of columns, your page will be filled with a number of equal squares.

    You can insert the number of columns in the 'Grid Style' section on the Twixl Platform.

    In your app > Design > Grid Styles

    Here are examples of both a 4-column and a 6-column grid with vertical scrolling.

    Browse Grids

    All the items you want to display will have a size of one or more of these squares. Your pages can have different cells as you can see in the example below.

    Brows Grid, how it works

    Each of the cells can display a thumbnail that links to an article, or to other content items like an image or a movie (more on 'content items' can be found here). But it can also be a link to a collection of articles (an 'issue' in traditional speak).

    2. Design your Grid Style

    In the "Grid Style" window, you can adjust a number of parameters for a collection, such as the number of columns in your grid and whether scrolling will be horizontal or vertical. You can set different parameters for tablet and phone content.

    1. Different device types

    In 1 Grid Style you can define a different layout for:

    • Tablets
    • Phones
    • Browser: will be used in the Browser Client.

    It's entirely up to you whether you want to use separate designs for each rendition or not. You can use the same design as well by using the buttons Copy to Phone, Copy to Tablet and/or Copy to Browser.


    The tab Browser Client will only be visible when you activated the Browser Client in your app. See this article for more info about the Browser Client.

    2. Different design options

    In the right pane you can define different design options:

    • Columns: determines the size of the squares that will be the basis for the size of the cells you place on your grid
    • Scrolling: determines whether scrolling in your browse pages will be horizontal or vertical
    • Padding: refers to the number of pixels reserved on the outer sides of the grid
    • Spacing: refers to the space in between cells on the grid
    • Colors: set colors for the background of the grid and the text.
    • Background Image: lets you select a background image for the collection - more details here.
    • Options: lets you control the swiping, and choose whether or not scrollbars should always be displayed.

    3. How are grid styles rendered?

    3.1. Auto-flow fills the gaps

    Cells are rendered in an intelligent way:

    • All cells are rendered using an 'auto-flow'.
    • Cells that don't fit in one row, will be moved to the next and there it will be evaluated again.
    New Grid


    As most apps use several grids for different pages, giving an clear and unique name for each and every grid style is key. This will make your work in a later stadium much easier!

    Was this article helpful?

    2 out of 3 found this helpful