Grid

Overview

Grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements.

A Grid component can read from and write to your database. Also, it can display the data on a web page allowing users to reduce the time and effort required to manage large amounts of data.

Please refer to this for more information: https://mui.com/material-ui/react-grid/.

Import

CODE

import { Grid } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
Default Style	Direction: None Wrap: None	The Default Style of the component includes Direction, Columns, Wrap.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size includes Width and Height with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Text	Font-family: None Size Unit: Px Font-weight: None Text-align: Left	The component Text includes Text, Font-family, Font-size, Font-weight, Size Unit, Font-color, Text-align.
General	Container: False Item: False Visibility: None Opacity: 100%	The component General includes Container, Item, Spacing, Column Spacing, Row Spacing, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

 <Grid
              direction="column-reverse"
              columns={15}
              wrap="wrap-reverse"
          sx={{':active': {'margin': '15px 20px','padding': '15px 20px',
              'width': '150px','height': '200px',
              'position': 'absolute','top': '15px','right': '15px','bottom': '20px','left': '20px',
              'fontFamily': 'Noto-Sans','fontSize': '15px','fontWeight': 'lighter',
              'color': '#fe0202ff','textAlign': 'center','visibility': 'hidden',},}}
               content="TextInput"
               container={true}
               item={true}
               spacing={15}
               columnSpacing={20}
               rowSpacing={10}>
</Grid>