Grid

Grid Layout. A CSS Grid Layout Component#

Usage#

This is a Grid layout component based off CSS Grid. It is a 2-dimensional layout system, aimed at making it easy to structure your Dashboard

import { Grid } from @motor-js/core
//...
<Grid
  rows={["60px", "auto", "30px"]}
  cols={["auto"]}
  areas={[["header"], ["main"], ["footer"]]}
  backgroundColor="altGray1"
>
  //...
</Grid>

Props#

info

This component does not require connection to a Qlik engine

Prop	Description	Options / Example
`areas`	grid-template-areas CSS property to specify named grid areas. Passed either as an array of arrays or an array of objects.	`arrayOf` `shape` { name: "header" start: [1,2], end: [3,4], } `arrayOf`
`rows`	Row sizes. If an array value is an array, the inner array indicates the minimum and maximum sizes for the row. Specifying a single string will cause automatically added rows to be the specified size.	`array`
`columns`	Column sizes. If an array value is an array, the inner array indicates the minimum and maximum sizes for the column. Specifying a single string will repeat multiple columns of that size, as long as there is room for more. Specifying an object allows indicating how the columns stretch to fit the available space.	`array`
`gap`	Gap between grid columns and rows	`string`
`fill`	Whether the width and/or height should fill the container.	`oneOf` `bool` 'horizontal' 'vertical'
`overflow`	Overflow of content for the grid	`oneOf` "auto", "hidden", "scroll", "visible" `shape` { horizontal: "auto", "hidden", "scroll", "visible", vertical: "auto", "hidden", "scroll", "visible" }
`fill`	Sets the gaps (gutters) between rows and columns.	`string`
`backgroundColor`	Grid backgroundColor	`string`
`justify`	Justify the contents along the cross axis	`oneOf` "around" "between" "center" "end" "evenly" "start" "stretch"
`justifyContent`	Justify the contents when there is extra space in the cross axis	`oneOf` "around" "between" "center" "end" "start" "stretch"
`align`	Align the contents along the cross axis	`oneOf` "start" "center" "end" "baseline" "stretch"
`alignContent`	Align the contents when there is extra space in the cross axis	`oneOf` "start" "center" "end" "between" "around" "stretch"

Sample Syntax#

Grid configuration#

The below syntax creates a grid of three rows and one column. The rows have been defined in the area property as header, main and footer.

//...
<Grid
  rows={["60px", "auto", "30px"]}
  cols={["auto"]}
  areas={[["header"], ["main"], ["footer"]]}
  backgroundColor="altGray1"
>
  ...
</Grid>

Example#

An example showing the uses of the grid layout component

Grid layout#

Sample grid layout

function BoxDemo() {
  let flexDirection = "column";

  const boxProps = {
    backgroundColor: "white",
    border: { color: "brand" },
    margin: "5px",
    borderRadius: "8px",
  };

  return (
    <Grid
      rows={["60px", "auto", "30px"]}
      cols={["auto"]}
      areas={[["header"], ["main"], ["footer"]]}
      backgroundColor="altGray1"
    >
      {/** HEADER */}
      <Box gridArea="header" style={{ margin: "auto" }}>
        <span style={{ color: "black", fontWeight: "bold" }}>
          Motor Starter Dashboard
          <span role="img" aria-label="peace_emoji">
            ✌️
          </span>
        </span>
      </Box>
      {/** MAIN */}
      <Box gridArea="main" style={{ margin: "auto" }}>
        Main Content here
      </Box>
      {/** FOOTER */}
      <Box gridArea="footer" style={{ margin: "auto" }}>
        <span style={{ color: "black" }}>
          made with
          <span
            role="img"
            aria-label="heart_emoji"
            style={{ padding: "0px 5px" }}
          >
            ❤️
          </span>
          by motor
        </span>
      </Box>
    </Grid>
  );
}