Layout is broken out into a 12 column grid of `Col`s.
Shorthand option:
You don't have to explicitly wrap each child in a `Col`. All children of `Layout` will get wrapped in `Col` automatically.
Any layout specific props that are meant for the `Col` will be passed to the `Col` wrapper accordingly.
Any props that you explicitly give to a `
` will override any props that it may have inherited by the `Layout` component.
All child component props will be passed directly to the component itself.
## How to use Layout
```html
// Bad (don't pass `
` props directly to children.)
// This will work, but it's considered bad practice.
// Good
// Good
```
## Mixed Layout Examples with Shorthand, Cols, children, and Overrides:
```jsx
const exampleStyles = require('./example.module.scss');
Some child
```
## Small 2 Col, Medium 3 Col Grid Example:
```jsx
const exampleStyles = require('./example.module.scss');
```
## Layout with GrayBox background Example:
```jsx
supertitle
title
description
```
## Layout with GrayBox background Example 2:
```jsx