--- title: Grid path: objects/grid status: Stable status_issue: 'https://github.com/github/design-systems/issues/88' source: 'https://github.com/primer/css/tree/main/src/layout/grid.scss' bundle: layout --- The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results. ## Float based grid Use `.clearfix` on the container and float utilities with columns for a floated grid layout. ```html live title="Float based grid"

My column

Looks better

Than your column

``` ### Reversed grid To reverse the order of columns, use `float-right` to float columns to the right. ```html live title="Float grid reversed"

One

Two

Three

``` ## Nesting You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest! ```html live title="Nesting grids"

Unnested

1 x Nested

2 x Nested

``` ## Centering a column Use `.mx-auto` to center columns within a container. ```html live title="Centering a column"

This column is the center of my world.

``` ## Column widths Column widths can be used with any other block or inline-block elements to add percentage-based widths. ```html live

Don't go bacon my heart.

T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.

``` ## Offset columns Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](#responsive-grids). ```html live title="Offset columns"

.offset-1

.offset-2

``` ## Gutters Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid. ```html live title="Gutters"

.col-md-3

``` Use padding utilities to create gutters for more customized layouts. ```html live title="Gutters with padding"

.pr-2

.px-2

.pl-2

.pr-2

.pl-2

``` ## Inline-block grids Use column widths with `d-inline-block` as an alternative to floated grids. ```html live title="Inline-block grid"

.col-4 .d-inline-block

``` You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct. ```html live title="Inline-block grid list"

``` ## Display table grids Using [display table utilities](/utilities/layout#display) with columns gives you some alternative layout options. A useful example is being able to keep the height of the container equal across a row when the length of content may differ. ```html live title="Table grid"

Bacon ipsum dolor amet leberkas pork pig kielbasa shankle ribeye meatball, salami alcatra venison.

Pork chop cupim cow turkey frankfurter, landjaeger fatback hamburger meatball salami spare ribs. Rump tenderloin salami, hamburger frankfurter landjaeger andouille.

Brisket tongue frankfurter cupim strip steak rump picanha pancetta pork pig kevin pastrami biltong. Shankle venison meatball swine sausage ground round. Tail pork loin ribeye kielbasa short ribs pork chop.

``` You can also create an alternative [media object](/utilities/layout#the-media-object) layout with `.display-table` and column widths. ```html live title="Table grid alternative"

GitHub

How people build software.

https://github.com/about

``` Note that table cells will fill the width of their container even when the total columns doesn't add up to 12. ```html live title="Table grid cells"

.col-4 .d-table-cell

.col-2 .d-table-cell

``` ## Flexbox grids You can use [flex utilities](/utilities/flexbox) on the container and columns to create a flexbox grid. This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts. ```html live title="Flexbox grid"

GitHub

How people build software.

https://github.com/about

``` ## Responsive grids All the column width classes can be set per breakpoint to create responsive grid layouts. Each responsive style is applied to the specified breakpoint and up. ### Breakpoints We use abbreviations for each breakpoint to keep the class names concise. | Shorthand | Description | | --------- | ----------------- | | sm | min-width: 544px | | md | min-width: 768px | | lg | min-width: 1004px | | xl | min-width: 1280px | **Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `12px`. This is so that content doesn't touch the edges of the window when resized.

In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show. ```html live title="Responsive grid"

.col-sm-6 .col-md-3 .col-lg-2

``` For demonstration, this is how the above example would look at the `sm` breakpoint. ```html live title="Responsive grid small"

.col-sm-6

``` This is how that same example would look at the `md` breakpoint. ```html live title="Responsive grid medium"

.col-md-3

``` This is how that example would look at the `lg` breakpoint. ```html live title="Responsive grid large"

.col-lg-2

``` ## Containers Container widths match our breakpoints and are available at a `sm`, `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container. ```html live title="Containers sized"

.container-sm, max-width 544px

.container-md, max-width 768px

.container-lg, max-width 1012px

.container-xl, max-width 1280px

```