Grid Panel

The grid panel displays a series of articles laid out in a grid. You can set the number of rows and columns each item in the grid occupies, and whether the item's content is aligned horizontally or vertically.

Grids are output using the CSS Grid Layout. You'll find a good explanation on https://css-tricks.com/complete-guide-css-grid-layout (opens new window). Your grid will need additional styling, which can be added via your site skin.css.

The articles that make up the grid can use a range of templates, including List, Default, Search, and even other Panels (so you could place a carousel in a grid).

Creating Grid Panels

To create a grid panel:

1. Relate the "grid" metadata value to a default article. This article will become a panel that displays the articles related to it in a grid
2. Relate one or more articles to your default article. These will be output in the grid
3. Each article in the grid can have metadata related to it which will control its size and layout in the grid
4. Relate the article from step 1 to an article that uses the Panel template

Grid Items

Articles in the grid output their heading, intro/summary text, and first related image, in the same way as articles in Default Panels.

Articles using the List template use the settings in their article extras to control how they appear. You can choose whether just the article summary is output, just the items in the list, or both.

Metadata from the "grid options" group can be related to the articles to control their size and behaviour:

Building the Grid

The example below shows a typical grid panel.

Most articles in the grid have the Block Panels metadata related to them so that they don't include a "see more" button and the whole content acts as a link, not just the heading.

Articles one, five and six have the "horizontal" metadata related, which also makes them span two columns.

Article two uses the List template, has a row-span of two and the "squared" metadata related to it.

Article six shows a List displaying both its summary text and list items.

Article five, the carousel, uses the Default template, has the "carousel" panel type metadata and "remove title" metadata related to it, and has three related articles of its own which make up the slides.

Styling

The grid panel provides the HTML structure for your grid. It will need additional styling.

In the site skin.css, I've added the following to give a grey background, border and shadow. I'm specifically targeting the "block" and "carousel" panel types within the grid.

.a-panel--grid-item.a-panel--block {
    padding: 20px;
    background-color: #f1f1f1;
    border: solid 2px #fff;
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
}

.a-panel--grid-item.a-panel--carousel-pt {
    padding: 20px;
    background-color: #f1f1f1;
    border: solid 2px #fff;
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
}