Grid

The Landcare grid system gives web, print, signage, presentation, and application layouts a shared structure. Use grids to control margins, columns, gutters, rows, modules, alignment, and visual rhythm before adding colour or decorative elements.

Purpose

Grid is a foundation, not a decoration. It helps Landcare materials feel consistent across national documents, local group flyers, websites, educational worksheets, reports, social tiles, signs, and applications.

Use the grid to make decisions about:

Margins: the protected outer space around content.
Columns: vertical divisions used to align content and create layout options.
Gutters: the spaces between columns.
Rows and modules: horizontal divisions that help print, posters, diagrams, and repeated cards stay ordered.
Baseline rhythm: the vertical rhythm created by typography, line-height, and spacing.
Content spans: how many columns a text block, image, table, card, form, or callout should occupy.

Anatomy

Part	Web guidance	Print guidance
Margins	Use responsive margins to protect content from viewport edges, browser chrome, side navigation, and touch edges.	Use generous margins for handling, trimming, binding, photocopying, outdoor display, and visual calm.
Columns	Use 4, 6, or 12 columns depending on viewport width and content density.	Use 4, 6, 8, or 12 columns depending on format, content density, and image/text relationships.
Gutters	Use consistent gutters from spacing tokens. Increase gutters for dense cards or touch interfaces.	Relate gutters to margins and baseline rhythm. Do not let text or images crowd the gutter.
Rows and modules	Use rows for cards, dashboard regions, and repeated components. Do not force every small control to the page grid.	Use modular grids for reports, worksheets, posters, forms, image captions, charts, and multi-panel layouts.
Baseline rhythm	Align headings, body copy, captions, tables, and controls to consistent vertical spacing.	Use baseline rhythm to coordinate text blocks, captions, image edges, rules, and footnotes.

Grid Examples

These examples show structural grid behaviour only. They are not finished compositions. Use them to decide the field, margins, columns, and modules before placing real content.

Web fixed grid

Documentation and article pages

A fixed content grid protects line length and keeps reading pages calm. Use it for guidance pages, articles, forms, and group information pages. 12 columns / fixed max width / responsive margins

Web fluid grid

Dashboards and data-heavy tools

A fluid grid uses available width for dense interfaces. Use it when tables, maps, calendars, or operational tools need more horizontal room. 12 columns / fills main content area / breakpoint-led

A4 modular grid

Reports, worksheets, and flyers

A modular grid combines columns and rows so headlines, images, captions, tables, and footnotes share a repeatable structure. 6 columns / 8 rows / margins and baseline rhythm

Poster grid

Promotional and event design

A larger poster grid can use asymmetry while staying ordered. Anchor major type, images, logos, and calls to action to the same system. 4 columns / strong margins / controlled visual weight

Web Grid

Use web grids responsively. The grid should normally apply to the main content area, not the entire screen when side navigation or asides are present. This follows the same practical idea used in contemporary product design systems: the layout grid responds to breakpoints and available content regions, while smaller components use spacing tokens and local alignment.

Viewport	Columns	Margin	Gutter	Best for
Small mobile	4	16 px	12 px	Short pages, forms, cards, stacked navigation, and field guidance.
Large mobile / small tablet	6	20 px	16 px	Mixed content, two-column card moments, compact learning materials.
Tablet	6	24 px	20 px	Documentation, diagrams, field resources, and moderate content density.
Desktop fixed	12	32-48 px	24 px	Reading pages, guidance, reports, landing pages, and content-led layouts.
Desktop fluid	12	32-48 px	24 px	Dashboards, data tables, maps, planning tools, and applications.

Use the grid for major structure

Align page sections, headings, text blocks, images, tables, forms, cards, charts, and calls to action to the grid. Use column spans to create hierarchy, contrast, and scanning rhythm.

Avoid forcing every small item to the page grid

Do not make small controls, icon groups, button clusters, or inline metadata obey the full page grid. Use local alignment and spacing tokens inside the component.

Print Grid

Print grids should be designed for the final format, viewing distance, production method, and content density. A4 documents, field worksheets, posters, signage, and social tiles need different grid behaviour even when they share brand tokens.

Format	Recommended grid	Margin starting point	Use
A4 report or guide	6 or 12 columns with baseline rhythm	18-24 mm	Reports, grant guidance, policy documents, educational guides.
A4 worksheet or field sheet	6 columns by 8-12 rows	14-20 mm	Learning activities, checklists, forms, observation sheets.
A3 poster	6 or 8 columns with large modules	20-30 mm	Local events, recruitment posters, campaign notices.
Signage	4 or 6 columns with strong margins	Based on viewing distance	Field signs, wayfinding, interpretive signs, public notices.
Social tile	4 columns or modular square grid	8-12% of canvas	Campaign posts, announcements, simple education messages.
Presentation slide	12 columns or 6 columns with rows	6-8% of canvas	Decks, workshops, training, board updates.

Josef Müller-Brockmann Principles

Use Josef Müller-Brockmann’s grid discipline as a practical method: create order first, then use typography, image, colour, and whitespace with restraint. The grid should make complex information easier to understand.

Define the format before designing: page size, screen region, orientation, print method, and viewing distance.
Choose a grid that fits the content: fewer columns for simple posters, more columns for editorial or data-heavy layouts, modular rows for repeated content.
Use asymmetry with order: an off-centre layout can still be rigorous when edges, baselines, and visual weight are controlled.
Keep alignment visible through behaviour: related things should share edges, spans, rows, or baselines.
Balance density and whitespace: empty space is part of the design, not leftover area.
Use colour sparingly: colour fields and saturated accents have visual weight and must be planned against the grid.

Applying Grid

Step	Action	Output
1. Define the field	Choose the content area: full page, main content area, slide safe zone, poster field, or component region.	A known canvas with protected margins.
2. Choose columns and modules	Select the column count, row structure, gutters, and baseline rhythm.	A repeatable structure for placing content.
3. Place major masses first	Position the title, image field, main text block, callout, table, logo, or action area.	Clear first-read and second-read hierarchy.
4. Align supporting content	Fit captions, metadata, links, charts, buttons, and footnotes to the grid or local component structure.	Consistent scanning and reduced visual noise.
5. Check the composition	Squint-test the layout, check gutters, line length, edge alignment, visual weight, and overflow.	A layout that works before detailed styling.

Use And Avoid

Use	Avoid
Use fixed grids for reading pages where line length matters.	Avoid stretching body copy across the full screen.
Use fluid grids for dense tools, maps, data tables, and operational interfaces.	Avoid limiting dense interfaces so much that key information is truncated.
Use modular grids for reports, worksheets, posters, forms, and repeated content.	Avoid placing items by eye when a repeatable grid would make the artefact easier to maintain.
Use consistent margins and gutters across related artefacts.	Avoid changing gutters or margins arbitrarily between sections.
Use flush-left, rag-right text for sustained reading.	Avoid justified body text and awkward rivers in long copy.
Use spacing tokens and local alignment inside components.	Avoid forcing every icon, button, or small label to span the global page grid.

Developer Reference

Grid decisions should be expressed as reusable variables where possible:

Token idea	Example value	Use
`--lds-grid-columns`	`12`	Default desktop column count.
`--lds-grid-gutter`	`24px`	Gap between major columns.
`--lds-grid-margin`	`clamp(16px, 4vw, 48px)`	Responsive page margin.
`--lds-grid-max-width`	`1180px`	Fixed content max width.
`--lds-grid-baseline`	`8px`	Vertical rhythm and spacing relationship.

References

Atlassian Design: Grid
Atlassian Design: Applying grid
Josef Müller-Brockmann, Grid Systems in Graphic Design