The Grid Layout feature lets you arrange questions in a multi-column grid within a group, using the gridformat<> appearance tag. This is useful for dense data-entry forms where multiple related fields should appear side-by-side instead of stacked vertically.

Как работи

Grid layout is applied at two levels:

  1. The group — set appearance: field-list grid(weight=N) to define how many columns the grid has
  2. Each field inside the group — set appearance: gridformat<row=R col=C colspan=S/> to position the field

The grid uses a 12-column Bootstrap-style system. weight=N defines how many logical columns your grid has; each column occupies 12/N Bootstrap columns.

Group-level appearance

AppearanceDescription
field-list grid(weight=2)2-column grid (each column = 6 Bootstrap cols)
field-list grid(weight=3)3-column grid (each column = 4 Bootstrap cols)
field-list grid(weight=4)4-column grid (each column = 3 Bootstrap cols)
field-list grid(weight=6)6-column grid (each column = 2 Bootstrap cols)

Field-level gridformat<> syntax 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
AttributeDescription
rowRow number (1-based)
colColumn number (1-based, within the grid defined by weight)
colspanNumber of columns this field spans (default 1)
backgroundcolorOptional CSS color for the field background (e.g., #f0f0f0, lightblue)

Пример: 2-column household survey section

typenamelabelappearance
begin_groupdemographicsDemographicsfield-list grid(weight=2)
textfirst_nameFirst namegridformat<row=1 col=1/>
textlast_nameLast namegridformat<row=1 col=2/>
integerageAgegridformat<row=2 col=1/>
select_one gendergenderGendergridformat<row=2 col=2/>
textaddressFull addressgridformat<row=3 col=1 colspan=2/>
end_group

This renders as:

  [ First name        ] [ Last name          ]
[ Age               ] [ Gender             ]
[ Full address (spans both columns)        ]

Пример: 3-column plot data entry

typenamelabelappearance
begin_groupplot_dataPlot detailsfield-list grid(weight=3)
textplot_idPlot IDgridformat<row=1 col=1/>
decimalarea_haArea (ha)gridformat<row=1 col=2/>
select_one crop_typecropCrop typegridformat<row=1 col=3/>
decimalyieldYield (kg)gridformat<row=2 col=1/>
decimalrevenueRevenuegridformat<row=2 col=2/>
textnotesNotesgridformat<row=2 col=3/>
end_group

Background colors

Use backgroundcolor to visually distinguish sections:

typenamelabelappearance
notesection_aSection Agridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

Best Practices

  1. Use grid layout only for data-entry intensive screens where side-by-side fields genuinely reduce scrolling.
  2. Keep colspan=1 fields short (IDs, codes, short selects) — wide labels truncate badly in narrow grid columns.
  3. Use colspan=N for fields with long labels or multi-line text inputs.
  4. Test on the smallest screen size you expect enumerators to use — a 4-column grid is cramped on a phone.
  5. Grid layout works best on web and tablet form factors; on mobile phones a 2-column layout is usually the maximum comfortable width.

Limitations

  • gridformat<> only works inside a group with grid(weight=N) appearance — it has no effect at the top level.
  • Grid layout is an rtSurvey web form extension and may not render correctly in other ODK-compatible clients.
  • Row and column positioning is not validated at form build time — overlapping fields will both render but may look broken.
Беше ли полезна тази страница?