Learning & Support


Styling: Grid Styles (v10)

Twixl Support Team Updated: - Created :

    Article-based apps in Twixl Publisher use a concept that we call "Browse Pages" as a flexible way to present your content to readers. While browse pages can still mimic the behaviour of the traditional kiosk that contains different issues, the flexibility goes much further.


    In version 10 of Twixl Publisher, we completely redesigned the way the Browse Grid is rendered on mobile devices. You'll definitely like it! For more information, see below.

    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 your page will be divided into a number of equal squares.

    Browse pages can be defined as either scrolling vertically or horizontally.

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

    Browse Grids

    All the items that you want to display will then have a size of one or more squares, and your pages will 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 a movie or an image (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. Grid Styles

    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.

    • 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.

    Tablet - Phone - Browser

    In 1 Grid Style you can define a layout for:

    • Tablets: This grid will be used on Tablets
    • Phones: This grid will be used on Phones
    • Browser: This grid 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 article-based app. See this KB-article for more info about the Browser Client.

    3. How are Grid Styles being rendered?

    3.1. Versions 5 - 9: Row by row

    For all apps created with version below 10 (5 - 10), all cells are being rendered row by row:

    • The app checks one row and fills that row with Cells.
    • If a Cell doesn't fit in the current row, the app will move that Cell to the first row where that Cell fits completely.

    This behaviour can cause gaps in your Browse Grid and will give the publisher a lot of extra work.

    3.2. Version 10+: Auto-flow literally fills the gaps

    For all apps created with version 10 or higher, cells are being rendered in an intelligent way:

    • All Cells are being rendered in an auto-flow.
    • Cells that don't fit in 1 row, will be moved to the next row and there the situation will be evaluated again.

    This results in a much better layout and the chance to have gaps is almost impossible. Due to the auto-flow, it will require far less work to obtain a better result!

    Was this article helpful?

    1 out of 1 found this helpful