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

PropDescriptionOptions / Example
areasgrid-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
rowsRow 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
columnsColumn 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
gapGap between grid columns and rowsstring
fillWhether the width and/or height should fill the container.oneOf
bool
'horizontal'
'vertical'
overflowOverflow of content for the gridoneOf
"auto", "hidden", "scroll", "visible"

shape
{
horizontal: "auto", "hidden", "scroll", "visible",
vertical: "auto", "hidden", "scroll", "visible"
}
fillSets the gaps (gutters) between rows and columns.string
backgroundColorGrid backgroundColorstring
justifyJustify the contents along the cross axisoneOf
"around"
"between"
"center"
"end"
"evenly"
"start"
"stretch"
justifyContentJustify the contents when there is extra space in the cross axisoneOf
"around"
"between"
"center"
"end"
"start"
"stretch"
alignAlign the contents along the cross axisoneOf
"start"
"center"
"end"
"baseline"
"stretch"
alignContentAlign the contents when there is extra space in the cross axisoneOf
"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>
);
}