How To
Documentation
    Learn More

      layout:block

      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)
      size

      The grid ratio to use for the smallest break point

      sm
      (optional)
      size

      The grid ratio to use for the small break point

      md
      (optional)
      size

      The grid ratio to use for the medium break point

      lg
      (optional)
      size

      The grid ratio to use for the large break point

      xl
      (optional)
      size

      The grid ratio to use for above the large break point

      xs-offset
      (optional)
      size

      The offset ratio to use for the smallest break point

      sm-offset
      (optional)
      size

      The offset ratio to use for the small break point

      md-offset
      (optional)
      size

      The offset ratio to use for the medium break point

      lg-offset
      (optional)
      size

      The offset ratio to use for the large break point

      xl-offset
      (optional)
      size

      The offset ratio to use for above the large break point

      dynamic
      (optional)
      string

      Watch for updates to the attributes

      Example

      Source

      
      
      

      Demo