# Grid

The Grid Element is a powerful layout system based on CSS Grid that allows you to create complex two-dimensional grid-based layouts for web pages. It provides a precise way to position and align elements within a grid container, making it easier to design responsive and flexible layouts.

With the Grid Element, you can define rows and columns, control their sizes, and place items anywhere within the grid. You can also set the grid-gap for adding spacing between grid cells, you can even create nested grids.

### Getting Started with Grids

When you first drag a Grid onto your page, you might notice that the columns aren’t immediately visible. That’s because the grid requires content to define its layout. To get started, drag and drop a Container into the grid. The container will occupy the number of columns you’ve set for the grid. As you add more containers, an insertion point will appear to the left or right of the existing container, guiding you on where the new content will fit. Drop the container, and you’ll see the grid automatically split into two columns. Repeat this process to populate the grid with as many columns as you’ve set up.

Once your containers are in the grid, you can adjust their behavior by changing their type to Grid Item. This setting allows you to control each item’s width. For example:

• If you’ve set your grid to 4 columns, you might set each grid item’s width to 1, which will evenly distribute the space across 4 columns.

• Alternatively, you can define the grid as having 12 columns and assign each grid item a width of 3. This approach is functionally identical but provides more granular control. While both methods work, many find the simpler “4 columns, 1 width per item” method easier to manage.

Grids can feel a bit tricky at first, but once you get the hang of it, they’re incredibly flexible and powerful.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements/components/grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.