Skip to main content

​
Description

Adds grid block classes to element

​
Usage

as element: 
<layout:block
       [xs="{size}"]
       [sm="{size}"]
       [md="{size}"]
       [lg="{size}"]
       [xl="{size}"]
       [xs-offset="{size}"]
       [sm-offset="{size}"]
       [md-offset="{size}"]
       [lg-offset="{size}"]
       [xl-offset="{size}"]
       [dynamic="{string}"]>
</layout:block>
as attribute 
<ANY layout-block
     [xs="{size}"]
     [sm="{size}"]
     [md="{size}"]
     [lg="{size}"]
     [xl="{size}"]
     [xs-offset="{size}"]
     [sm-offset="{size}"]
     [md-offset="{size}"]
     [lg-offset="{size}"]
     [xl-offset="{size}"]
     [dynamic="{string}"]>
   ...
</ANY>

​
Parameters

ParamTypeDetails
xs (optional)sizeThe grid ratio to use for the smallest break point
sm (optional)sizeThe grid ratio to use for the small break point
md (optional)sizeThe grid ratio to use for the medium break point
lg (optional)sizeThe grid ratio to use for the large break point
xl (optional)sizeThe grid ratio to use for above the large break point
xs-offset (optional)sizeThe offset ratio to use for the smallest break point
sm-offset (optional)sizeThe offset ratio to use for the small break point
md-offset (optional)sizeThe offset ratio to use for the medium break point
lg-offset (optional)sizeThe offset ratio to use for the large break point
xl-offset (optional)sizeThe offset ratio to use for above the large break point
dynamic (optional)stringWatch for updates to the attributes

​
Example

​
Source

<layout:grid>
    <layout:block sm="23-24" md="3-4" lg="1-2" xl="1-4" lg-offset="1-4" xl-offset="1-2">Content</layout:block>
</layout:grid>