{"title":"Adding Grid, Row, and Column Layers","id":51936,"link":"https:\/\/env.averta.net\/en\/step\/adding-grid-row-and-column-layers\/","parent":[51827],"content":"

In this article you can find out how to create a gird layout over a slide and locate other layers inside it. The grid itself, defines by layers and supports the layer features and parameters too.<\/p>\n

Note: <\/strong>Since gird layers use Flex layout, this feature is not completely supported in IE9.<\/p>\n

To create a grid you need to use grid<\/code>, row<\/code> and column<\/code> layer types.<\/p>\n

Grid layer<\/h2>\n

The grid<\/code> layer defines a wrapper to contains grid rows. Usually, you need to create only one gird layer. To define this layer and specify it as a layer, add ms-layer<\/code> class name and set its type by data-type=\"grid\"<\/code>.<\/p>\n

Grid layer automatically fills its height of parent element (slide). If you wish to disable this feature, you can add ms-content-size<\/code> class name to its frame element i.e. data-frame-class=\"ms-content-size\"<\/code><\/p>\n

As the grid layer element is a flex container, you can align rows inside grid by align-items<\/code><\/a> or justify-content<\/code><\/a> styles.<\/p>\n

Row layer<\/h2>\n

A row adds an isolated horizontal area inside the grid wrapper to contain columns. Row defines as a layer by ms-layer<\/code> class name and its type sets by data-type=\"row\"<\/code> attribute.<\/p>\n

Same as grid layer, row is a flex container too and you can align and justify its containing columns by flex box alignment style properties.p<\/p>\n

Note: <\/strong>If you need to add flex item styles like align-self<\/code> to the row element individually, the styles should add to the layer frame by data-frame-style<\/code> attribute.<\/p>\n

Row attributes<\/h3>\n