columnLayout

Examples

kind: ColumnLayout
widths: [300px, auto]
areas: [my-control-panel, my-viewer]

Object properties

Object information

• Object with the following properties:
  • kind (required): Constant ColumnLayout
    • Place content areas in a horizontal array
  • widths (required):
    • The width sizes of the columns
    • Array of:
      • string
        • A grid size is a definition of distance either in an absolute, relative or flexible way the following grid sizes are allowed: - px: An absolute size in pixels, this will force it to be this exact value (Example: 12px) - em: An size relative to the parents font-size, this will force it to be this exact (calculated) pixel value (Example: 1.0em) - rem: An size relative to the root html font-size, this will force it to be this exact (calculated) pixel value (Example: 0.8re) - %: A size relative to the size of it’s parent expressed as a percentage of the parent (Example: 10%) - auto: A magic keyword to let the browser figure out what the size should be, this usually results in some value that mimicks other auto values in the same direction and makes sure the content fits, it can however vary strongly between browsers (Example: auto) - fr: A fraction of the total left over space in the parent. With left over is meant the space that is left after, %, px, em, rem and auto space has been filled in. (Example: 1fr)
  • areas (required):
    • The content names to place in the columns of the layout
    • Array of:
      • string
        • A grid area refers to the key in the contents mapping