Grid

Use our flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.

How it works

The grid system uses a series of containers, rows, and columns to lay out and align content. The following row and corresponding code are an example of and in-depth look at how the grid comes together.

<div class="docs-grid-example">
  <div class="nys-grid-container">
    <div class="nys-grid-row">
      <div class="nys-tablet:nys-grid-col">.nys-tablet:nys-grid-col</div>
      <div class="nys-tablet:nys-grid-col">.nys-tablet:nys-grid-col</div>
      <div class="nys-tablet:nys-grid-col">.nys-tablet:nys-grid-col</div>
    </div>
  </div>
</div>

This example code creates three equal-width columns on tablet, desktop, and widescreen devices by using our predefined grid classes. Those columns are centered in the page with the parent nys-grid-container container.

The following sections break the layout grid down and describe how it works.

Containers, rows, and columns

Containers: nys-grid-container centers the container and gives it a maximum width of nys-desktop (1024px). If you would like the grid to span the full width of the page, do not use nys-grid-container.

• nys-grid-container can also accept any breakpoint width: nys-mobile-lg, nys-tablet, and nys-desktop.
• By default, nys-grid-container has a padding-x of 2 at narrow widths, and a padding-x of 4 at nys-desktop and wider.

Rows: Columns must have a nys-grid-row as a parent.

Columns: nys-grid-col-[1-12] indicates the number of columns the item spans out of a possible 12 per row. So, if you want three equal-width columns across, use nys-grid-col-4 for each item.

Additional functionality

• Equal-width columns: With flexbox, grid columns without a specified width will display as equal-width columns. For example, four instances of nys-grid-col will display as one-quarter-width columns across all sizes. Refer to the auto-layout columns section for more examples.
• Gutters: Rows and columns don’t have any gutters by default, but gutters can be added by including nys-grid-gap-2px, nys-grid-gap, or nys-grid-gap-300 at the row level. Refer to gutters for more info.
• Media queries: Grid breakpoints are based on minimum-width media queries, meaning they apply to that specific width and all greater widths (e.g., nys-tablet:col-4 applies to tablet, desktop, and widescreen devices but not at nys-mobile-lg or any width below the tablet breakpoint). Refer to responsive classes for a full list.

Auto layout columns

Variable-width content

.nys-grid-col-auto items fit the natural width of their content.

.nys-grid-col and .nys-grid-col-fill items flex to fill the available space as illustrated in the following example row and code.

<div class="docs-grid-example">
  <div class="nys-grid-container">
    <div class="nys-grid-row">
      <div class="nys-grid-col-auto">.nys-grid-col-auto</div>
      <div class="nys-grid-col-fill">.nys-grid-col-fill</div>
    </div>
  </div>
</div>

Responsive classes

Same at all breakpoints

For columns that should maintain the same proportion at any viewport width, use the .nys-grid-col and .nys-grid-col-* classes. Specify a numbered class when you need a column of a specific width; otherwise, use .nys-grid-col.

.nys-grid-col-[1-12] sets a fixed width of [n] grid columns in a 12-column grid.

<div class="nys-grid-row">
  <div class="nys-grid-col-1">.nys-grid-col-1</div>
  <div class="nys-grid-col-2">.nys-grid-col-2</div>
  <div class="nys-grid-col-3">.nys-grid-col-3</div>
  <div class="nys-grid-col-4">.nys-grid-col-4</div>
  <div class="nys-grid-col-2">.nys-grid-col-2</div>
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col-8">.nys-grid-col-8</div>
  <div class="nys-grid-col-2">.nys-grid-col-2</div>
  <div class="nys-grid-col-2">.nys-grid-col-2</div>
</div>

Stacked columns at narrow widths

Columns are full-width until the narrowest breakpoint specified in a .nys-grid-col class. For instance, using a single set of nys-tablet:nys-grid-col-* classes, you can create a basic grid system that starts out stacked before displaying as columns at the tablet breakpoint (nys-tablet:) as illustrated in the following rows and corresponding code.

<div class="nys-grid-row">
  <div class="nys-tablet:nys-grid-col">.nys-tablet:nys-grid-col</div>
  <div class="nys-tablet:nys-grid-col">.nys-tablet:nys-grid-col</div>
  <div class="nys-tablet:nys-grid-col">.nys-tablet:nys-grid-col</div>
</div>
<div class="nys-grid-row">
  <div class="nys-tablet:nys-grid-col-4">.nys-tablet:nys-grid-col-4</div>
  <div class="nys-tablet:nys-grid-col-8">.nys-tablet:nys-grid-col-8</div>
</div>

Mix and match

Don't want your columns to simply stack in some breakpoints? Use a combination of different classes for each breakpoint as needed. See the following example rows and corresponding code for a better idea of how it all works.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="nys-grid-row">
  <div class="nys-tablet:nys-grid-col-8">.nys-tablet:nys-grid-col-8</div>
  <div class="nys-grid-col-6 nys-tablet:nys-grid-col-4">.nys-grid-col-6 .nys-tablet:nys-grid-col-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="nys-grid-row">
  <div class="nys-grid-col-6 nys-tablet:nys-grid-col-4">.nys-grid-col-6 .nys-tablet:nys-grid-col-4</div>
  <div class="nys-grid-col-6 nys-tablet:nys-grid-col-4">.nys-grid-col-6 .nys-tablet:nys-grid-col-4</div>
  <div class="nys-grid-col-6 nys-tablet:nys-grid-col-4">.nys-grid-col-6 .nys-tablet:nys-grid-col-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="nys-grid-row">
  <div class="nys-grid-col-6">.nys-grid-col-6</div>
  <div class="nys-grid-col-6">.nys-grid-col-6</div>
</div>

Offsetting columns

.nys-grid-offset-[1-12] offsets an item by the specified number of grid columns as shown in the following example.

<div class="nys-grid-row">
  <div class="nys-grid-col-8 nys-grid-offset-4">.nys-grid-col-8.nys-grid-offset-4</div>
</div>

Column wrapping

Items wrap when the sum of the grid columns is more than 12 as shown in the following example.

<div class="nys-grid-row">
  <div class="nys-grid-col-8">.nys-grid-col-8</div>
  <div class="nys-grid-col-3">.nys-grid-col-3</div>
  <div class="nys-grid-col-5">.nys-grid-col-5</div>
</div>

Gutters

Default gutter

Add nys-grid-gap to a grid row to add a gap (or gutter) between each column in the row. The default gap width is 2 units and 4 units at desktop and higher.

<div class="nys-grid-row nys-grid-gap">
  <div class="nys-grid-col-4">
    <div>.nys-grid-col-4</div>
  </div>
  <div class="nys-grid-col-4">
    <div>.nys-grid-col-4</div>
  </div>
  <div class="nys-grid-col-4">
    <div>.nys-grid-col-4</div>
  </div>
</div>

Gutter sizing

nys-grid-gap-* classes allow you to customize the gutter width. The following options are available:

• nys-grid-gap-0 — No gap
• nys-grid-gap-1px — 1px gap
• nys-grid-gap-2px — 2px gap
• nys-grid-gap-50 — 4px gap (0.25rem)
• nys-grid-gap-100 — 8px gap (0.5rem)
• nys-grid-gap-150 — 12px gap (0.75rem)
• nys-grid-gap-200 — 16px gap (1rem)
• nys-grid-gap-250 — 20px gap (1.25rem)
• nys-grid-gap-300 — 24px gap (1.5rem)
• nys-grid-gap-400 — 32px gap (2rem)
• nys-grid-gap-500 — 40px gap (2.5rem)
• nys-grid-gap-600 — 48px gap (3rem)
• nys-grid-gap-700 — 56px gap (3.5rem)
• nys-grid-gap-800 — 64px gap (4rem)
• nys-grid-gap-1200 — 96px gap (6rem)

<div class="nys-grid-row nys-grid-gap-50">
  <div class="nys-grid-col-4">
    <div>.nys-grid-col-4</div>
  </div>
  <div class="nys-grid-col-4">
    <div>.nys-grid-col-4</div>
  </div>
  <div class="nys-grid-col-4">
    <div>.nys-grid-col-4</div>
  </div>
</div>