Welcome to Sandbox, an interactive tutorial,
where you can change whatever you like.

Grid

Now you're in the editing mode. To preview the page, press P or click on in the right bottom corner. To return to editing, press , which replaced the eye. You can switch between two modes anytime.


This project has several pages. In editing mode, use arrows at the right edge of the screen to navigate between pages. In preview mode, just scroll up or down.

P
switch between editing and preview mode

Grid and Guides make it easier to balance layouts and arrange elements on a page. Grid is a framework of dense horizontal and vertical lines that resembles graph paper. Guides are sparser sets of columns and horizontal lines, like notebook paper.


Enter editing mode and open the Grid and Layout menu to proceed. Try turning Grid and Guides on and off separately to explore their differences. Access them from the menu in the lower right corner of the browser, or using the G and H shortcuts.

H
guides

G
grid

S
snapping

Press H to open Guides settings. The three parameters on the top control your Guides layout—they determine the number of columns, their width and the distance between them.


Change the number of columns, the width and the distance to fit in the sample Guides.

The two parameters on the bottom left determine the distance between baselines—the lines on which your text lies. Recreate the sample baselines for the text on this page.

The final four parameters are used to adjust the margins of your project. Try to recreate the margins used for this layout on free space.

Press G to open Grid settings. The first parameter sets the distance between regular grid lines in pixels. The second one reflects the distance between bold grid lines, which depends on the first value. Set your own parameters to fit into the sample grid.

Now you can see your work in action. If you did everything right, all your widgets would be arranged. Congrats!

invisible lines

Almost every layout has axes, invisible lines along which key elements — like text blocks, headlines, and illustrations — are arranged. These guidelines are the basic elements of the grid.


A grid can be very primitive and, for a book with a simple structure, may serve mostly as the baselines and margins of the text. Or it can be very complex, like when dealing with the variety of texts, headlines, photos, announcements and graphics that make up a newspaper. In a multi-column magazine, the number of columns in the grid may unexpectedly change from section to section.


On a website, it may extend or compress in response to the width of the browser.

Achievement unlocked!

Now you know how to handle grids in Readymag.

You can always borrow some ideas from our Templates library. Press M or to enter the Pages panel and click on the link to Templates at the bottom of the menu. Tap on any template and press the ‘Add pages’ button at the bottom on the right. You’re set on making awesome designs!