{"id":16737,"date":"2016-07-08T08:58:04","date_gmt":"2016-07-08T00:58:04","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=16737"},"modified":"2017-12-14T14:33:54","modified_gmt":"2017-12-14T06:33:54","slug":"grid-layout-4-4-0","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/grid-layout-4-4-0\/","title":{"rendered":"Grid Layout (4.4.0)"},"content":{"rendered":"\n

This article applies to the Grid Layout in version 4.4 of P2 Explorer.\u00a0For help on the latest version, see Grid Layout<\/a>.<\/p>\n

Overview<\/h2>\n

Grid-based layouts are one of the easiest ways to get started in designing a page<\/a>. A grid-based layout provides the basis for a balanced design, and is also easy to visualise.\u00a0<\/p>\n

In Explorer, you can lay out the elements of your page as if you were putting one element in each cell, just like you would in Excel\u00ae. It's a simple concept, but you can achieve some complex layouts.<\/p>\n

The following diagram shows the standard basic grid layout with 2 columns and 2 rows:<\/p>\n

\"Grid<\/p>\n

\u00a0<\/div>\n\n\n\n\n\n\n\n
Width<\/strong>:<\/td>\nThe width of the column in pixels. You should only enter a number. Type * to allow the browser to automatically adjust the width of the column.<\/td>\n<\/tr>\n
Column spacing<\/strong>:<\/td>\nThe amount of spacing or padding between each column, in pixels. You should only enter a number. The default is no spacing, which means that the elements may butt up against each other.<\/td>\n<\/tr>\n
Height<\/strong>:<\/td>\nThe height of the row in pixels. You should only enter a number. Type * to allow the browser to automatically adjust the height of the row.<\/td>\n<\/tr>\n
Row spacing<\/strong>:<\/td>\nThe amount of spacing or padding between each row, in pixels. You should only enter a number. The default is no spacing, which means that the elements may butt up against each other.<\/td>\n<\/tr>\n
Style<\/strong><\/td>\nThe style<\/a> you want to apply to the grid layout.\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Types of Grid Layouts<\/h2>\n

Here are some simple examples of grid-based page design:<\/p>\n\n\n\n
\"layout5\"<\/td>\n\"layout1\"<\/td>\n\"layout2\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

In Explorer, you can achieve some complex layouts when you add a grid layout inside another grid layout - which is how you effectively \"split\" cells.<\/p>\n

Let's look at the following dashboard. It's a bit more complicated than the above examples, and makes use of embedding grids inside another grid.\u00a0<\/p>\n

\"Grid<\/a><\/p>\n

\u00a0<\/div>\n

We're going to break this down into what the grid layout looks like, and then we'll show you how to construct it in the step by step tutorial below.<\/p>\n

The image below left (Breakdown #1<\/em>) shows you that this dashboard actually follows the first simple structure shown in the layout examples above.<\/p>\n\n\n\n\n
\"Royalties<\/a><\/td>\n\"Royalties<\/a><\/td>\n<\/tr>\n
Dashboard - Breakdown #1<\/em><\/td>\nDashboard - Breakdown #2<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Breakdown #2<\/em> (above right) shows how the Header and Content sections are then further broken down. The Header cell is divided into 2 further cells, and the Content cell is divided into 4 further cells. In fact, Breakdown #2 has a grid layout inserted into the header cell, and another grid layout inserted into the content cell!<\/p>\n

We're going to look at how to recreate this dashboard in the tutorial below, step-by-step.<\/p>\n

\u00a0<\/p>\n

\n

Grid Styles<\/h2>\n

The Grid layout comes with 2 different styles, which affect the overall look of the page:<\/p>\n

\"Cards\" style<\/strong><\/em><\/p>\n

The Cards<\/em> style has a clean, minimalist look with a white background. \u00a0<\/p>\n

\"Grid<\/a><\/p>\n

\"Pods\" style<\/strong><\/em><\/p>\n

The Pods<\/em> style uses a pale grey page background, with each cell having a white background. It's useful when you want each cell to be distinct from the other cells.<\/p>\n

\"Grid<\/a><\/p>\n

\n

Width and Height<\/h2>\n

The width of columns and height of rows can be specified in 3 ways:<\/p>\n