Grid

Grid

Overview

The Grid component is a flexible and customizable grid layout system for React applications. It allows you to create responsive grid layouts with ease, offering both automatic and manual column sizing options. This component is ideal for designing complex layouts in a simple and efficient manner.

Installation

To use the Grid component, first import it into your React project:

const { Grid } = window.$_gooee.framework;

Usage

The Grid component can be used to arrange its children in a grid layout. It automatically calculates the column width based on the number of children or allows for manual column width settings.

Props

The Grid component accepts the following props:

• children: The elements to be laid out in the grid. These should typically be column components or divs.
• noGutter: If set to true, removes the gutter (spacing) between columns.
• className: Additional CSS class names to apply to the grid container.
• auto: If set, the component automatically calculates the column width. If not set, the component expects manual column width definitions.

Automatic Grid Layout

When the auto prop is set, the Grid component automatically calculates and assigns equal widths to each column, depending on the number of children. Each child element will be wrapped in a div with a class col-x, where x is the calculated width.

Example of automatic grid layout:

<Grid auto>
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
</Grid>

Manual Grid Layout

If the auto prop is not set, the Grid component expects that each child will have its own width defined. In this case, you should manually specify the column classes on the children.

Example of manual grid layout:

<Grid>
    <div className="col-4">Your Content</div>
    <div className="col-8">Your Content</div>
</Grid>

Styling

The Grid component uses standard Bootstrap grid class names like row and col-x. You can extend or override these styles by passing your own class names or style objects.

Accessibility

This grid layout follows basic accessibility standards, ensuring content is accessible and navigable. However, always ensure to meet all accessibility requirements for your specific use case.

Browser Support

The Grid component is compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge.

Examples

3-Column Automatic Grid

<Grid auto>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</Grid>

2-Column Manual Grid

<Grid>
    <div className="col-6">Column 1</div>
    <div className="col-6">Column 2</div>
</Grid>

No Gutter Grid

<Grid noGutter>
    <div className="col-4">Column 1</div>
    <div className="col-4">Column 2</div>
    <div className="col-4">Column 3</div>
</Grid>

Contributing

Contributions to improve the Grid component are always welcome. Please adhere to the project's contribution guidelines for submitting bug reports, feature requests, or code contributions.