---
title: "Grid"
description: "The Grid Control Component features different Grid Layouts for structuring a Page. The Characteristic depends on Viewport."
path: https://www.eonshowroom.eon.com/en/page-elements/grid.html
lastModified: 2024-11-18T11:52:07.337Z
---

# Grid

# Grid

#### Grid Overview for Different Viewports

| Number of Columns | Name of the Layout | Columns on Desktop | Columns on Table | Columns on Mobile |
| --- | --- | --- | --- | --- |
| 1 | **D/T 12** | 12 | 12 | 12 |
| 2 | **D/T 2+10** | 2+10 | 2+10 | 12/12 |
| **D/T 10+2** | 10+2 | 10+2 | 12/12 |
| **D 9+3 \| T 8+4** | 9+3 | 8+4 | 12/12 |
| **D 3+9 \| T 4+8** | 3+9 | 4+8 | 12/12 |
| **D/T 8+4** | 8+4 | 8+4 | 12/12 |
| **D/T 4+8** | 4+8 | 4+8 | 12/12 |
| **D/T 6+6** | 6+6 | 6+6 | 12/12 |
| 3 | **D/T 2+5+5** | 2+5+5 | 2+5+5 | 12/12/12 |
| **D/T 5+5+2** | 5+5+2 | 5+5+2 | 12/12/12 |
| **D 6+3+3 \| T 6+6+12** | 6+3+3 | 6+6/12 | 12/12/12 |
| **D 3+6+3 \| T 2+8+2** | 3+6+3 | 2+8+2 | 12/12/12 |
| **D 3+3+6 \| T 12+6+6** | 3+3+6 | 12/6+6 | 12/12/12 |
| **D/T 4+4+4** | 4+4+4 | 4+4+4 | 12/12/12 |
| **D/T 2+8+2 \| M 1+10+1** | 2+8+2 | 2+8+2 | 1+10+1 |
| 4 | **D 2+4+4+2 \| T 6+6** | 2+4+4+2 | 6+6/6+6 | 12/12/12/12 |
| **D 3+3+3+3 \| T 6+6** | 3+3+3+3 | 6+6/6+6 | 12/12/12/12 |

###### Keep in Mind:

[Web Navigation Flyouts](/content/foundationNG/en/page-elements/web-navigation.html), [Footer](/content/foundationNG/en/page-elements/footer.html), [Multi Content Stage Items](/content/foundationNG/en/teasers-and-highlights/multi-content-stage.html), [Tab](/content/foundationNG/en/content-elements/tabs.html), [Carousel](/content/foundationNG/en/content-elements/carousel.html), and [Accordion](/content/foundationNG/en/content-elements/accordion.html) Component are also using Grids, but they have specific Grid Layouts.

[How to Configure](#how-to)

### Description

The Grid Control Component features different Grid Layouts for Structuring a Page.

- There are different Layouts available
- Content Position can be Top, Middle, or Bottom per Column
- A Grid helps to structure a Page
- A Grid can have an ID where an Anchor Link can point to

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-grid-control--interactive)

### Inspirations

#### Same Height

All About Reading makes it easy to teach multiple students! If you're teaching more than one child, you'll need to purchase a few individual products for each child.

#### With longer text to have more content.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

#### Use Bike not Car

![Solar panels](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eon-solarpark-tucson_298_RGB%3A2-1?fmt=webp&ts=1779953496772)

## Different Content Positions

[Start working with Grids](#how-to)

Any of the Foundation Component does have it's own Height based on the Content. It is possible to align it to Top, Center, or Bottom for each Column individually.

![girl in the woods having fun](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/girls_laughing_in_wood%3A16-9?fmt=webp)

#### Remove Spaces

Remove Spaces Feature does remove the Spaces between the Columns. This might be a good Option if you want to combine Images with some Teasers.

[Check also Spacing Options of Section](https://www.eonshowroom.eon.com/en/page-elements/content-section.html)

### Usage Rules & Features

##### Features

- There are different Layouts available
- A Grid helps to structure a Page

##### Properties

- Content Position can be Top, Middle, or Bottom per Column
- A Grid can have an ID where an Anchor Link can point to

##### Design

- Different Options to remove Spaces are available
- Same Hide Option can be used

##### In which Grid Columns does it fit?

**Never put a Grid in a Grid !**

##### DO's

- Use it to Structure a Page
- If combining Teasers in the same Grid, use same Height Feature to ensure a consistent look

##### DONT's

- Do not use Grid in a Grid
- Do not have to many different Grid Layouts per Page
- Do not remove the Spaces between the Columns if using other Components than Teaser or Images

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

#### Keep in Mind

Component Policy must be respected.

[Read more about Component Policy](https://www.eonshowroom.eon.com/en/aem-basics/component-policy.html)

## Placement of a Grid

A Grid is placed inside a Section and defines Columns. Inside these Columns, several Components can be placed.

![Choose a Layout for the Grid](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/grid_column-layouts%3A1-1?fmt=webp)

### Choose a Layout

At first, Editor needs to choose how many Columns should have this Grid.

Afterwards, in second Dropdown, a Column Layout fitting to the Amount of wanted Columns for the Grid can be choosen.

There are several Layouts available as it is described in [Table on Top of this Page](#layouts-table).

![Grid Configuration](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/grid_configuration%3A3-4?fmt=webp)

### Grid Configuration

Editor can add an ID to a Grid.

Furthermore, if Same Height is selected, Components having Background will come in Same Height for this Grid.

Editor can also decide to remove Spaces between Components (Left-Right as well as Top-Bottom) inside the Grid.

Beside that, Editor can choose to configure a minimal Height for the Grid. Therefore, an Height Type and a Value for minimum Height needs to be set. But the variable Height is not be displayed in AEM Edit Mode. To review the Output please use „View as Published“.

![Choose a Content Position per Column](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/grid_content-pos%3A3-4?fmt=webp)

### Adjust Content Position

Editor can also adjust the Content Position of each Column as Top, Center, or Bottom by checking the Checkbox and selecting each Column individually. By Default the Position is Top for each Column.