## Grid Container

High-level documentation on our grid settings can be found in [our Grid documentation](/?path=/docs/base-theme-breakpoints--page) under our Base Theme.

**Note** that the [example shown in the _Canvas_ tab](/?path=/story/packages-global-styles-components-g-grid-container--demo) also includes inner grid columns for demonstration purposes. We do not yet have an established convention on the development side for setting up columns and gutters.

### Using `g-grid-container`

Our grid container styles can be applied to an element using a global CSS class. This class is included in `@hashicorp/react-global-styles/style.css`, so there should be no need to import it directly.

Our grid container should be used to wrap the inner content of every Block, unless otherwise specified.

```jsx
<div className="g-grid-container">My contents in a grid container</div>
```

### Note on `g-container`

Previously a global class `.g-container` served an identical purpose. This global class is still included in `@hashicorp/react-global-styles/style.css`, so when migrating older projects, it can be left in place.