# Layout

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents

- [About](#about)
- [Migrating](#migrating)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## About

Layout-related code, including conversion, spacing, and breakpoints, have been
moved over into their own package: `@carbon/layout`. This package is also
included by default in `@carbon/elements`.

They are also integrated into `carbon-components` directly so there is no need
to install additional packages if you are using `carbon-components` already.

## Migrating

| v9                  | v10                                         |
| ------------------- | ------------------------------------------- |
| `$base-font-size`   | `$carbon--base-font-size`                   |
| `rem`, `em` helpers | `carbon--rem`,`carbon--em`                  |
| `$grid-breakpoints` |                                             |
|                     | `carbon--breakpoint-next`                   |
|                     | `carbon--breakpoint-prev`                   |
|                     | `carbon--breakpoint-is-smallest-breakpoint` |
|                     | `carbon--largest-breakpoint-name`           |
|                     | `carbon--breakpoint-up`                     |
|                     | `carbon--breakpoint-down`                   |
|                     | `carbon--breakpoint-between`                |
|                     | Mixin `carbon--breakpoint`                  |
|                     | `carbon--largest-breakpoint`                |
|                     | `$carbon--grid-gutter`                      |
|                     | `$carbon--grid-gutter--condensed`           |
|                     | `carbon--key-height`                        |
|                     | Mixin `carbon--key-height`                  |
|                     | `$carbon--mini-unit-size`                   |
|                     | function `carbon--mini-units`               |
| `$spacing-3xs`      | `$carbon--spacing-01`, `$spacing-01`        |
| `$spacing-2xs`      | `$carbon--spacing-02`, `$spacing-02`        |
| `$spacing-xs`       | `$carbon--spacing-03`, `$spacing-03`        |
| `$spacing-sm`       | `$carbon--spacing-04`, `$spacing-04`        |
| `$spacing-md`       | `$carbon--spacing-05`, `$spacing-05`        |
| `$spacing-lg`       | `$carbon--spacing-06`, `$spacing-06`        |
| `$spacing-xl`       | `$carbon--spacing-07`, `$spacing-07`        |
| `$spacing-2xl`      | `$carbon--spacing-08`, `$spacing-08`        |
| `$spacing-3xl`      | `$carbon--spacing-09`, `$spacing-09`        |
| `$layout-2xs`       | `$carbon--layout-01`, `$layout-01`          |
| `$layout-xs`        | `$carbon--layout-02`, `$layout-02`          |
| `$layout-sm`        | `$carbon--layout-03`, `$layout-03`          |
| `$layout-md`        | `$carbon--layout-04`, `$layout-04`          |
| `$layout-lg`        | `$carbon--layout-05`, `$layout-05`          |
| `$layout-xl`        | `$carbon--layout-06`, `$layout-06`          |
| `$layout-2xl`       | `$carbon--layout-07`, `$layout-07`          |
