Layout

The layout in Graffiti is based on Flexbox layout model. You can implement the Flexbox layout model in your own projects by using the Container, Row and Column components.

Container

The container component is generally the outermost layout component set at the root or page level of your app. You can use it to set the width of the pages and how the page should be aligned.

import { Container, Heading, Text } from "@samgl/graffiti-ui";

const MyContainer = () => {
  return (
    <Container $width="800px" $alignment="center" $flexDirection="column">
      <Heading $level={1}>Hello, world!</Heading>
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
    </Container>
  );
};

Rows and Columns

Then you can use the Row and Column components to create a layout inside the container where items are arranged side by side (Row) or vertically (Column).

import { Container, Row, Column, Heading, Text } from "@samgl/graffiti-ui";

const MyPage = () => {
  return (
    <Container $width="800px" $alignment="center" $flexDirection="column">
      <Row $gap="20px">
        <Column>
          <Heading $level={1}>Column 1</Heading>
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
        </Column>
        <Column>
          <Heading $level={1}>Column 2</Heading>
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
        </Column>
      </Row>
    </Container>
  );
};