@cas-smartdesign/z-layout

A custom element which positions child elements sequentially (from left to right, top to bottom).

Requirements

• ES6
  • For an ES5 variant use the 1.x.x versions or transpile it manually.
• Custom Elements v1
  • Native or https://github.com/webcomponents/webcomponentsjs

Attributes

• column-width: string
  • Defines the minimum column width for the layout
  • Configurable via the --z-layout-column-width as well.
    • If both an Attribute and a CSS Custom Property is set then the former one is applied as it is used via an element.style property.
• fixed-columns: boolean
  • If set the column-width is not only considered as a minimum width but a regular width, thus children do not stretch or grow.

CSS Custom Properties

• --z-layout-column-width
  • See column-width in the attributes section
• --z-layout-spacing
  • Defines the spacing around the elements inside the layout

Caveats

• If a browser does not support the display: grid (or supports only the older version of the specification like IE 11) then the children have to use the border to simulate the spacing. Thus applying another border would brake it.
  • Note that although Edge supports the new specification of grid but has critical issues with it therefore the flex variant is used there.
  • The direct children of the z-layout may not use horizontal margin values due to the limitation of the flex variant.