---
title: "Displaying fields on a grid - fields on the left and on the right"
slug: "displaying-fields-on-a-grid-fields-on-the-left-and-on-the-right"
updated: 2025-07-18T00:03:53Z
published: 2025-07-18T00:03:53Z
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.infoodle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying fields on a grid - fields on the left and on the right

## Grid Display of Form Fields

There may be occasions when you want to display form fields in a way that's different from the default layout (one field above another). One option is to utilise the CSS Grid feature. An example of this can be found here: [https://demoinfoodle.infoodle.com/f/CSSGridExample](https://demoinfoodle.infoodle.com/f/CSSGridExample){target=`_blank`}

![image.png](https://cdn.document360.io/d198920d-a212-4177-85f9-e1abc92e7ab3/Images/Documentation/image-Z88K5MK1.png){height="" width=""}

This form also includes page breaks to display fields on different pages.

Additional CSS has been added to replace the default full border around input fields, with only a bottom border. For example:

```
 /* Replace default text input field full border with only a bottom border */
input[type="text"] {border: none}
input[type="text"] {border-bottom: 1px solid #ccc}

 /* Replace default drop down field full border with only a bottom border  */
select {border: none}
select {border-bottom: 1px solid #ccc}

```

When building your form, each field is assigned with row number (starting at zero - "row0").

The CSS to the form above consists of: defining the grid and the number of columns (two in this case), then defining:

* the fields that span across the full width of the grid, 
* the fields that should be displayed in the left column
* the fields that should be displayed in the right column

```
/* Change default layout of one field below another, to layout using a grid  */
.input_form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  gap: 1rem;
}

/* Spans across both columns - horizontal lines and the initial Next buttons  */
.row3, .row9, .row12 { grid-column-start: 1;
  grid-column-end: 3;
}

/* Left column */
.row4, .row5, .row10, .row11, .row13, .row14 {
  grid-column: 1;
}

/* Right column */
.row6, .row7, .row8, .row15  {
  grid-column: 2;
}
```

## Related

- [Forms](/forms.md)
- [CSS Code (Advanced)](/css-code-advanced.md)