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.
Note: Since gird layers use Flex layout, this feature is not completely supported in IE9.
To create a grid you need to use grid, row and column layer types.
Grid layer
The grid 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 class name and set its type by data-type="grid".
Grid layer automatically fills its height of parent element (slide). If you wish to disable this feature, you can add ms-content-size class name to its frame element i.e. data-frame-class="ms-content-size"
As the grid layer element is a flex container, you can align rows inside grid by align-items or justify-content styles.
Row layer
A row adds an isolated horizontal area inside the grid wrapper to contain columns. Row defines as a layer by ms-layer class name and its type sets by data-type="row" attribute.
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
Note: If you need to add flex item styles like align-self to the row element individually, the styles should add to the layer frame by data-frame-style attribute.
Row attributes
data-gutter– Specifies the space between columns in pixels.data-widthset– Specifies the row width size (default value is 100%).
data-gutter and data-widthset support multiple values, depends on the defined breakpoints in the slider. For example, you can set different gutter size for each size, data-gutter="20,35,0". The order of the values is important and it should follow the breakpoints order from large to small.
Column layer
Column is the last part of the grid layout. Columns add inside row and contain other layers. To define column, you need to specify it as a layer by adding ms-layer class name and set its type by data-type="column". Column element also supports flex box alignment styles, in other words, it aligns and justifies the layer.
Column width
Default column width is 100%. To set a different width, you can use data-widthset attribute. It is the same as the row width and the attribute supports multiple values depend on the breakpoints. For example,?data-widthset="25%,50%,100%" changes the column width at each breakpoint.
Note: If you need to add flex item styles like align-self to the column element individually, the styles should be added to the layer frame by data-frame-style attribute.
Example
The following example creates a gird containing two rows and six columns.
<div id="masterslider" class="master-slider"> <div class="ms-slide"> <div class="ms-layer" data-type="grid" > <div class="ms-layer" data-type="row" data-widthset="80%,80%,100%" data-frame-style="align-self:center;" data-gutter="30,10,0" > <div class="ms-layer" data-type="column" data-widthset="25%,50%,100%"> <div class="ms-layer" data-type="text" data-offset="absolute:false">Text layer content</div> </div> <div class="ms-layer" data-type="column" data-widthset="25%,50%,100%"> <div class="ms-layer" data-type="text" data-offset="absolute:false">Text layer content</div> </div> <div class="ms-layer" data-type="column" data-widthset="25%,50%,100%"> <div class="ms-layer" data-type="text" data-offset="absolute:false">Text layer content</div> </div> <div class="ms-layer" data-type="column" data-widthset="25%,50%,100%"> <div class="ms-layer" data-type="text" data-offset="absolute:false">Text layer content</div> </div> </div> <div class="ms-layer" data-type="row" data-gutter="30,10,0" > <div class="ms-layer" data-type="column" data-widthset="50%,50%,100%"> <div class="ms-layer" data-type="text" data-offset="absolute:false">Text layer content</div> </div> <div class="ms-layer" data-type="column" data-widthset="50%,50%,100%"> <div class="ms-layer" data-type="text" data-offset="absolute:false">Text layer content</div> </div> </div> </div> </div> </div>
Usually, you will need to disable layer absolute positioning feature inside the column layer, to let the layer get a size related to the column size. For more information check out Positioning layers article.