Four subtle settings decide whether a section feels airy, compact, or stretches across the entire browser. You will learn to use them without CSS knowledge.
What you will learn
- Distinguish between a constrained boxed row and a full-width fluid row.
- Set the gutter spacing between columns.
- Increase a supported row by dragging the height handle.
- Recognize which rows do not offer these options.
What individual options mean
Boxed keeps the content within a constrained container. Therefore, on a wide monitor, space remains on the sides and the text is more comfortable to read. Fluid allows the row to utilize the full available width. It is suitable for a colored band, a large hero image, or a section that should reach from the left to the right edge.
Gutter is the gap between columns—or Joomla positions—within a single row. The editor offers values from 0 to 5. Zero presses columns tightly together, while a higher number adds more space. This is not the outer margin of the entire section nor the padding of the content inside a module.
Row height determines the minimum vertical space of the selected section. For supported rows, you can change it by dragging the resize handle. The setting saves as part of the row appearance and becomes included in the design history.
Step-by-step procedure
- Open Grid mode and select a top-level top or bottom row.
- Choose boxed if you want a calmer, readable width, or fluid for a full-width band.
- Adjust the gutter in the row settings. Start with a medium value and select smaller or larger gaps depending on the content.
- If a height handle is available for the row, drag slowly and observe the result in previews for various screen widths.
- Wait for the save status. Closing the tab immediately might prevent the last fraction of a change from being caught by autosave.
Not every area has its own boxed or fluid option
This option belongs to top-level rows. Inner mainbox rows and sidebar rows do not have it independently because their width is determined by the parent layout. Additionally, the mainbox is a mandatory area and cannot be removed or duplicated.
What the editor displays
The editor compiles a safe visual preview from these values. This helps evaluate proportions, but it is not a live Joomla page and does not execute real modules. After installing the template, the height may naturally expand depending on actual text, images, and module content.
A useful test is switching the same row sequentially across desktop, tablet, and mobile views. A fluid section does not mean that every piece of text must extend edge-to-edge; its positions and modules can have their own padding. Likewise, a large minimum height does not automatically center content. Therefore, observe not only the row boundary, but also the actual placement of headings, images, and buttons. If empty whitespace occurs on mobile, return the height to a more moderate value and let it grow based on content.