Skip to main content
Official website. How you know

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Digital Design System

Grid

Use grid layouts to guide your designs based on different screen sizes. Design for small screens first and prioritize content readability. 

Layout grids

Breakpoints and grid styles

A breakpoint is the threshold at which the website’s layout changes to maintain a good user experience. In responsive design, a breakpoint range indicates the most appropriate number of columns for that viewport size, plus recommended widths for margins and gutters.

Our grid aligns to three breakpoints. Once a viewport exceeds 1440 px in width, only the margins will scale.

NOTE: In the current version of the NYC Digital Design System, all content on the tablet layout grid inherits mobile styles for components, patterns, typography, and containers.

Image lists the attributes of the "s" breakpoint, along with a description and abstract grid image. The attributes are as follows:, Breakpoint: s, Viewport width (px): 320-425, # of Columns: 4, Gutters (px): 16, Margins (px) 16, Description: The small breakpoint is used on mobile devices. It is optimized for iPhone SE (the smallest commonly used smartphone). Image lists the attributes of the "m" breakpoint, along with a description and abstract grid image. The attributes are as follows:, Breakpoint: m, Viewport width (px): 720-820, # of Columns: 8, Gutters (px): 24, Margins (px) 40, Description: The medium breakpoint is used on tablets. It is optimized for iPad mini (the smallest commonly used tablet). Image lists the attributes of the "l" breakpoint, along with a description and abstract grid image. The attributes are as follows:, Breakpoint: l, Viewport width (px): 1440+, # of Columns: 12, Gutters (px): 40, Margins (px) 64-scaling, Description: The large breakpoint is used for laptop and desktop devices.

Fluid grid

Although responsive, fluid grids still use breakpoints to determine whether the layout needs to change between viewport sizes. The containers and text on pages have preset minimum and maximum sizes based on our priority viewports to ensure the best reading experience for users.

Example: Informational page

An informational page is typically dense with static content, so we prioritize the reading experience for users by shortening text line length on desktop and extending it on mobile.

Two annotated mobile nyc.gov screenshots. The first shows a long description in a hero area. The annotation reads "Text should use all four columns to maintain a smooth reading experience." The second screenshot shows a table. The edges of the table are aligned with the edges of the grid columns. The annotation reads "For tables on mobile, the number of columns and complexity of data will determine whether it should be condensed within the layout grid."

Example: Form

You can be flexible with how containers and components occupy the grid in forms. However, we still recommend limiting your container and component widths to maintain content readability.

Grid anatomy

Elements

Columns divide the page into equal vertical sections and are used to organize content.

Gutters are the gaps between the columns. They separate content in a consistent way.

Margins define the outer edges of the grid. They prevent content from spilling past the viewable regions.

Column span and offset

Column span

Our grid has 12 columns for aligning content. Content should span across three or more columns, up to a maximum of 12. For flexibility, mix and match the number of columns used to unlock a variety of layouts across different breakpoints.

Options of single column span of 12, two column span of 4 and 8 or 6 and 6, three column span of 4 each

Column offset

Content does not need to span across all 12 columns. It can span a smaller number of columns, resulting in a layout with content centered on a 12 column grid.

We recommend not offsetting more than half the number of columns in each viewport, as that creates a visual imbalance of content (span) and negative space (offset). For example, do not offset seven of 12 columns on desktop, or five of eight columns on tablet.

Column span of 12 has no offset to span all columns, span of 10 with an offset of 2 or a span of 8 with offset of 4 are is centered

Scaling text

The maximum line length for text elements is 80 characters or 750px.

Text spans 860px font size 18pt character per line: 82

Text spans entire screen, all 12 columns