Styled UI Library

Grid

Grid serves as a primitive layout component based on the CSS Grid API. It provides a mobile-first guide for layout and alignment of UI elements, dividing the overall canvas into a system of default 12 columns.

Examples

link

Basic grid

The Grid component is architected as a fundamental mapping to the CSS Grid API. It encompasses two principal components that are designed to be used in tandem: <Grid />, acting as the container, and <GridItem />, serving as the items or children.

lg=9

lg=3

lg=9

import { Grid, GridItem } from '@millanbrankovic/styled-ui-library';

function DefaultGridExample() {
  return (
    <Grid>
      <GridItem columnsLg={9}>
        <Box bgColor="tertiary" hasRadius>
          <Text title="lg=9" />
        </Box>
      </GridItem>
      <GridItem columnsLg={3}>
        <Box bgColor="tertiary" hasRadius>
          <Text title="lg=3" />
        </Box>
      </GridItem>
      <GridItem columnsLg={3}>
        <Box bgColor="tertiary" hasRadius>
          <Text title="lg=3" />
        </Box>
      </GridItem>
      <GridItem columnsLg={9}>
        <Box bgColor="tertiary" hasRadius>
          <Text title="lg=9" />
        </Box>
      </GridItem>
    </Grid>
  );
};

export default DefaultGridExample;

link

Variations

Grid with multiple breakpoints

Components can possess various defined widths, initiating layout adjustments at specified breakpoints. Width values assigned to larger breakpoints supersede those assigned to smaller ones. For instance, using columnsXs={12} columnsMd={6} columnsLg={4} props designates a component to consume half of the viewport width (6 columns) when the viewport width is 768 pixels or more and (4 columns) when the viewport width is 1024 pixels or more. In scenarios with smaller viewports, the component expands to utilize all 12 available columns.

xs=12 md=6 lg=4

import { Grid, GridItem } from '@millanbrankovic/styled-ui-library';

function multipleBreakpointsGridExample() {
  return (
    <Grid>
      {Array.from(Array(6)).map((index) => (
        <GridItem columnsXs={12} columnsMd={6} columnsLg={4} key={index}>
          <Box bgColor="tertiary" hasRadius>
            <Text title="xs=12 md=6 lg=4" />
          </Box>
        </GridItem>
      ))}
    </Grid>
  );
};

export default multipleBreakpointsGridExample;

link

Settings

Columns

Adjusting the number of columns by modifying the default count (12) utilizing the columns property on the <Grid /> component.

xs=12 md=4

import { Grid, GridItem } from '@millanbrankovic/styled-ui-library';

function columnsGridExample() {
  return (
    <Grid columns={16}>
      {Array.from(Array(4)).map((index) => (
        <GridItem columnsXs={12} columnsMd={4} key={index}>
          <Box bgColor="tertiary" hasRadius>
            <Text title="xs=12 md=4" />
          </Box>
        </GridItem>
      ))}
    </Grid>
  );
};

export default columnsGridExample;

link

Gap

To manage the spacing between child elements, employ the gap prop. Acceptable values for the gap prop range from 1, 2, 3, 4, 8, 12, 16, 24, 32, 48, 72, 96, to 128, with each unit representing pixels px. In the provided example, we have selected a gap value of 4 for the xs breakpoint, 24 for the md breakpoint, and 48 for the lg breakpoint. These spacing distinctions can be easily observed by resizing a browser window.

xs=12 md=4

import { Grid, GridItem } from '@millanbrankovic/styled-ui-library';

function gapGridExample() {
  return (
    <Grid gap={{ xs: 4, md: 24, lg: 48 }}>
      {Array.from(Array(6)).map((index) => (
        <GridItem columnsXs={12} columnsMd={4} key={index}>
          <Box bgColor="tertiary" hasRadius>
            <Text title="xs=12 md=4" />
          </Box>
        </GridItem>
      ))}
    </Grid>
  );
};

export default gapGridExample;

link

Actions

Clickable GridItem

At times, enhancing user interactivity necessitates enabling clicks on elements that are not inherently clickable, such as buttons or anchors. By incorporating a clickable prop, we ensure a superior user experience, offering clear visual cues that an item is interactive and clickable.

xs=12 md=4

import { Grid, GridItem } from '@millanbrankovic/styled-ui-library';

function clickableGridItemExample() {
  return (
    <Grid gap={{ xs: 16, md: 16, lg: 16 }}>
      {Array.from(Array(6)).map((index) => (
        <GridItem 
          columnsXs={12}
          columnsMd={4}
          clickable
          onClick={() => alert('GridItem {index} clicked!')} 
          key={index}
        >
          <Box bgColor="tertiary" hasRadius>
            <Text title="xs=12 md=4" />
          </Box>
        </GridItem>
      ))}
    </Grid>
  );
};

export default clickableGridItemExample;