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>
  );
}